/**
  * Name: Devfox
  * Version: 1.0
  * Author: CymolThemes
  * Author URI: https://www.cymolthemes.com
*/

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

/**

  1. General
     - Variables
     - Extra-outer

  2. Spacing

  3. Color
     - Skin-color, Skin-bg-color, Skin-border-color
     - darkGrey-color, darkGrey-bg-color
     - white-color, white-bg-color, white-border-color
     - Grey-color, Grey-bg-color, grey-border-color

  4. Pre-loader

  5. SocialIcon / TooltipTop

  6. Slick_dots/arrows

  7. TopBar

  8. Header
     - SiteBrand(logo)
     - SiteNavigation(Menu)
     - side-menu

  9. Footer
     - FirstFooter
     - SecondFooter
 
  10. GoTop BUtton
  
  11. Page-Title-Row

  12. Inner-Pages
      - single-pages-content
      - Classic_Blog
      - Single_Blog
      - Contact_page
      - Error_page
      - Map

**/


/* ===============================================
    General
------------------------*/

/** Variables **/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    outline: none;
}

a,
button,
input {
    outline: none;
}

ol,
ul {
    padding: 0;
    margin: 0;
}

strong {
    font-weight: 600;
}

iframe {
    width: 100%;
    border: none;
    display: block;
}

p {
    margin: 0 0 15px;
}

*::-moz-selection {
    background: #ff382f;
    color: #fff;
    text-shadow: none;
}

::-moz-selection {
    background: #ff382f;
    color: #fff;
    text-shadow: none;
}

::selection {
    background: #ff382f;
    color: #fff;
    text-shadow: none;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input,
select {
    font-family: inherit;
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    vertical-align: middle;
    width: 100%;
    color: #8093a8;
    padding: 12px 15px 12px;
    border-radius: 0;
    font-weight: 400;
    background-color: #fff;
    text-transform: inherit;
    border: 1px solid rgba(0, 43, 92, 0.08);
    font-size: 14px;
    outline: none;
    line-height: inherit;
    letter-spacing: 0px;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    display: inline-block;
    text-decoration: none;
    font-size: 13px;
    line-height: 21px;
    font-weight: 500;
    padding: 11px 40px 11px;
    border: 2px solid transparent;
    border-radius: 0;
    color: #fff;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    cursor: pointer;
    outline: none;
    -webkit-font-smoothing: antialiased;
}

button:focus {
    box-shadow: none;
    outline: 0;
    border: 0;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
    border: 1px solid #ff382f;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-appearance: searchfield;
}


/* clears the 'X' from Internet Explorer */
input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}


textarea::placeholder,
textarea::-moz-placeholder,
textarea::-webkit-input-placeholder,
select::placeholder,
select::-moz-placeholder,
input::placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder {
    color: var(--body-font-color) !important;
}

menu,
ol,
ul {
    margin: 16px 0;
    padding: 0 0 0 25px;
}

/** Typography Variable **/
:root {
    --base-bodyfont: "Lato", sans-serif;
    --base-bodyfont-Size: 15px;
    --base-bodyfont-color: #676b72;
    --base-skin: #ff382f;
    --base-dark: #05255f;
    --base-grey: #f5f5f5;
    --base-white: #ffffff;
    --base-headingfont: "Lato", sans-serif;
    --base-headingfont-color: #05255f;
}


.border-color {
    color: #e5e5e5;
}

.bodyfont-color {
    color: var(--base-bodyfont-color);
}

.headingfont-color {
    color: var(--base-headingfont-color);
}

/** Background Colors **/
.bg-base-skin {
    background-color: var(--base-skin);
}

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

.bg-base-grey {
    background-color: var(--base-grey);
}

.bg-base-white {
    background-color: var(--base-white);
}

/** Text Colors **/
.text-base-skin {
    color: var(--base-skin);
}

.text-base-dark {
    color: var(--base-dark);
}

.text-base-grey {
    color: var(--base-grey);
}

.text-base-white {
    color: var(--base-white);
}

/** Bg-layer Colors **/
.bg-base-skin>.cmt-bg-layer {
    background-color: var(--base-skin);
}

.bg-base-dark>.cmt-bg-layer {
    background-color: var(--base-dark);
}

.bg-base-grey>.cmt-bg-layer {
    background-color: var(--base-grey);
}

.bg-base-white>.cmt-bg-layer {
    background-color: var(--base-white);
}


.text-base-white h1:not(.text-base-skin, .text-base-dark),
.text-base-white h2:not(.text-base-skin, .text-base-dark),
.text-base-white h3:not(.text-base-skin, .text-base-dark),
.text-base-white h4:not(.text-base-skin, .text-base-dark),
.text-base-white h5:not(.text-base-skin, .text-base-dark),
.text-base-white h6:not(.text-base-skin, .text-base-dark),
.text-base-white a:not(.text-base-skin, .text-base-dark),
.bg-base-dark h1,
.bg-base-dark h2,
.bg-base-dark h3,
.bg-base-dark h4,
.bg-base-dark h5,
.bg-base-dark h6 {
    color: var(--base-white);
}

.bg-base-dark,
.bg-base-skin {
    color: rgba(255, 255, 255, .67);
}

.bg-base-dark.text-base-white,
.bg-base-skin.text-base-white {
    color: rgba(255, 255, 255, .950);
}

.about-overlay-01 {
    justify-content: center;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    position: relative;
    content: '';
    top: 0;
    right: 1px;
    padding: 11px 16px 6px;
    transform: rotate(180deg);
}

.about-overlay-01 h3 {
    font-size: 20px;
    line-height: 26px;
    margin: 0;
}


body {
    font-family: var(--base-bodyfont);
    font-weight: 400;
    font-size: var(--base-bodyfont-Size);
    line-height: 26px;
    letter-spacing: 0.1px;
    color: var(--base-bodyfont-color);
    
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--base-headingfont), sans-serif;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--base-headingfont-color);
}

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

h2 {
    font-size: 50px;
    line-height: 60px;
}

h3 {
    font-size: 18px;
    line-height: 28px;
}

h4 {
    font-size: 30px;
    line-height: 40px;
}

h5 {
    font-size: 20px;
    line-height: 26px;
}

h6 {
    font-size: 18px;
    line-height: 20px;
}

.container {
    max-width: 1200px;
    padding: 0 15px;
}

.row:not(.g-0) {
    margin-left: -15px;
    margin-right: -15px;
}

.row:not(.g-0)>[class*='col-'] {
    padding-left: 15px;
    padding-right: 15px;
}


/** Extra-outer **/
body .page {
    overflow: hidden;
    position: relative;
    z-index: 10;
}

body .site-main {
    background-color: #fff;
    position: relative;
    z-index: 1;
}

body .page.sidebar-true .site-main {
    padding: 0;
    background-color: #fff;
}

a {
    color: var(--base-dark);
}

a:hover {
    color: var(--base-skin);
}

a,
img {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

label {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px !important;
    line-height: 25px
}

.fs-16 {
    font-size: 16px !important;
    line-height: 24px
}

.fs-18 {
    font-size: 18px !important;
    line-height: 26px
}

.fs-20 {
    font-size: 20px !important;
    line-height: 30px
}

.fs-22 {
    font-size: 22px !important;
    line-height: 32px
}

.fs-24 {
    font-size: 24px !important;
    line-height: 34px
}

.fs-26 {
    font-size: 26px !important;
    line-height: 36px
}

.fs-28 {
    font-size: 28px !important;
    line-height: 38px
}

.fs-30 {
    font-size: 30px !important;
    line-height: 40px
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}


.box-shadow {
    box-shadow: 0 0 9px 0 rgba(29, 33, 67, 0.10)
}

.border-rad_3 {
    border-radius: 3px;
}

.border-rad_4 {
    border-radius: 4px;
}

.border-rad_5 {
    border-radius: 5px;
}

.border-rad_6 {
    border-radius: 6px;
}

.border-rad_7 {
    border-radius: 7px;
}

.border-rad_8 {
    border-radius: 8px;
}

.border-rad_9 {
    border-radius: 9px;
}

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

.border-tl-rad_5 {
    border-top-left-radius: 5px;
}

.border-tr-rad_5 {
    border-top-right-radius: 5px;
}

.border-br-rad_5 {
    border-bottom-right-radius: 5px;
}

.border-bl-rad_5 {
    border-bottom-left-radius: 5px;
}

.alignleft {
    float: left;
    margin: .425em 1.75em 1.25em 0;
}

.alignright {
    float: right;
    margin: .425em 0 1.25em 1.75em;
}

.z-index_1 {
    z-index: -1;
}

.z-index-0 {
    z-index: 0;
}

.z-index-1 {
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}

.underline {
    position: relative;
}

.underline:before {
    position: absolute;
    content: '';
    height: 2px;
    width: 100%;
    background-color: var(--base-skin);
    bottom: -2px;
    left: 0;
}


/* ===============================================
    Spacing
------------------------*/

/** Padding **/
.spacing-1 {
    padding: 80px 112px 0;
    margin-left: -112px;
    margin-right: -112px;
    margin-top: -305px;
}

.spacing-2 {
    padding: 80px 325px 200px 0px;
    margin-right: -280px;
    margin-top: -80px;
}

.spacing-3 {
    padding: 60px 0 165px;
    margin-bottom: -95px;
}

.spacing-4 {
    padding: 70px 115px 70px 75px;
    margin-left: -60px;
}

.spacing-5 {
    margin-top: 60px;
    padding-bottom: 20px;
    margin-left: 100px;
}

.spacing-6 {
    padding: 55px 30px;
}

.spacing-7 {
    padding: 80px 100px 0 0;
    margin-right: -100px;
    margin-top: -300px;
}

.spacing-8 {
    padding: 80px 112px 0;
    margin-left: -112px;
    margin-right: -112px;
    margin-top: -220px;
}

.spacing-9 {
    padding: 80px 112px 60px;
    margin-left: -112px;
    margin-right: -112px;
    margin-top: -360px;
}



.p-10 {
    padding: 10px ! important;
}

.p-15 {
    padding: 15px ! important;
}

.p-20 {
    padding: 20px ! important;
}

.p-25 {
    padding: 25px ! important;
}

.p-30 {
    padding: 30px ! important;
}

.p-40 {
    padding: 40px ! important;
}

.p-45 {
    padding: 45px ! important;
}

.p-50 {
    padding: 50px ! important;
}

.p-60 {
    padding: 60px ! important;
}

.p-80 {
    padding: 80px ! important;
}

.p-100 {
    padding: 100px ! important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pr-5 {
    padding-right: 5px ! important;
}

.pr-10 {
    padding-right: 10px ! important;
}

.pr-15 {
    padding-right: 15px ! important;
}

.pr-20 {
    padding-right: 20px ! important;
}

.pr-25 {
    padding-right: 25px ! important;
}

.pr-30 {
    padding-right: 30px ! important;
}

.pr-35 {
    padding-right: 35px ! important;
}

.pr-40 {
    padding-right: 40px ! important;
}

.pr-45 {
    padding-right: 45px ! important;
}

.pr-50 {
    padding-right: 50px ! important;
}

.pr-55 {
    padding-right: 55px ! important;
}

.pr-60 {
    padding-right: 60px ! important;
}

.pr-65 {
    padding-right: 65px ! important;
}

.pr-70 {
    padding-right: 70px ! important;
}

.pr-75 {
    padding-right: 75px ! important;
}

.pr-80 {
    padding-right: 80px ! important;
}

.pr-85 {
    padding-right: 85px ! important;
}

.pr-90 {
    padding-right: 90px ! important;
}

.pr-95 {
    padding-right: 95px ! important;
}

.pr-100 {
    padding-right: 100px ! important;
}

.pl-0 {
    padding-left: 0px !important;
}

.pl-2 {
    padding-left: 2px ! important;
}

.pl-3 {
    padding-left: 3px ! important;
}

.pl-5 {
    padding-left: 5px ! important;
}

.pl-10 {
    padding-left: 10px ! important;
}

.pl-15 {
    padding-left: 15px ! important;
}

.pl-20 {
    padding-left: 20px ! important;
}

.pl-25 {
    padding-left: 25px ! important;
}

.pl-30 {
    padding-left: 30px ! important;
}

.pl-35 {
    padding-left: 35px ! important;
}

.pl-40 {
    padding-left: 40px ! important;
}

.pl-45 {
    padding-left: 45px ! important;
}

.pl-50 {
    padding-left: 50px ! important;
}

.pl-55 {
    padding-left: 55px ! important;
}

.pl-60 {
    padding-left: 60px ! important;
}

.pl-65 {
    padding-left: 65px ! important;
}

.pl-70 {
    padding-left: 70px ! important;
}

.pl-75 {
    padding-left: 75px ! important;
}

.pl-80 {
    padding-left: 80px ! important;
}

.pl-85 {
    padding-left: 85px ! important;
}

.pl-90 {
    padding-left: 90px ! important;
}

.pl-95 {
    padding-left: 95px ! important;
}

.pl-100 {
    padding-left: 100px ! important;
}

.pt-0 {
    padding-top: 0px !important;
}

.pt-5 {
    padding-top: 5px ! important;
}

.pt-10 {
    padding-top: 10px ! important;
}

.pt-15 {
    padding-top: 15px ! important;
}

.pt-20 {
    padding-top: 20px ! important;
}

.pt-25 {
    padding-top: 25px ! important;
}

.pt-30 {
    padding-top: 30px ! important;
}

.pt-35 {
    padding-top: 35px ! important;
}

.pt-40 {
    padding-top: 40px ! important;
}

.pt-45 {
    padding-top: 45px ! important;
}

.pt-50 {
    padding-top: 50px ! important;
}

.pt-55 {
    padding-top: 55px ! important;
}

.pt-60 {
    padding-top: 60px ! important;
}

.pt-65 {
    padding-top: 65px ! important;
}

.pt-70 {
    padding-top: 70px ! important;
}

.pt-75 {
    padding-top: 75px ! important;
}

.pt-80 {
    padding-top: 80px ! important;
}

.pt-90 {
    padding-top: 90px ! important;
}

.pt-100 {
    padding-top: 100px ! important;
}

.pt-120 {
    padding-top: 120px ! important;
}

.pt-130 {
    padding-top: 130px ! important;
}

.pt-140 {
    padding-top: 140px ! important;
}

.pt-150 {
    padding-top: 150px ! important;
}

.pt-160 {
    padding-top: 160px ! important;
}

.pt-170 {
    padding-top: 170px ! important;
}

.pt-180 {
    padding-top: 180px ! important;
}

.pt-190 {
    padding-top: 190px ! important;
}

.pt-200 {
    padding-top: 200px ! important;
}

.pt-245 {
    padding-top: 245px ! important;
}

.pt-345 {
    padding-top: 345px ! important;
}

.pt-350 {
    padding-top: 350px ! important;
}

.pb-0 {
    padding-bottom: 0px !important;
}

.pb-5 {
    padding-bottom: 5px ! important;
}

.pb-10 {
    padding-bottom: 10px ! important;
}

.pb-15 {
    padding-bottom: 15px ! important;
}

.pb-20 {
    padding-bottom: 20px ! important;
}

.pb-25 {
    padding-bottom: 25px ! important;
}

.pb-30 {
    padding-bottom: 30px ! important;
}

.pb-35 {
    padding-bottom: 35px ! important;
}

.pb-40 {
    padding-bottom: 40px ! important;
}

.pb-45 {
    padding-bottom: 45px ! important;
}

.pb-50 {
    padding-bottom: 50px ! important;
}

.pb-55 {
    padding-bottom: 55px ! important;
}

.pb-60 {
    padding-bottom: 60px ! important;
}

.pb-65 {
    padding-bottom: 65px ! important;
}

.pb-70 {
    padding-bottom: 70px ! important;
}

.pb-75 {
    padding-bottom: 75px ! important;
}

.pb-80 {
    padding-bottom: 80px ! important;
}

.pb-85 {
    padding-bottom: 85px ! important;
}

.pb-90 {
    padding-bottom: 90px ! important;
}

.pb-95 {
    padding-bottom: 95px ! important;
}

.pb-100 {
    padding-bottom: 100px ! important;
}

.pb-120 {
    padding-bottom: 120px ! important;
}

.pb-130 {
    padding-bottom: 130px ! important;
}

.pb-140 {
    padding-bottom: 140px ! important;
}

.pb-150 {
    padding-bottom: 150px ! important;
}

.pb-160 {
    padding-bottom: 160px ! important;
}

.pb-170 {
    padding-bottom: 170px ! important;
}

.pb-180 {
    padding-bottom: 180px ! important;
}

.pb-190 {
    padding-bottom: 190px ! important;
}

.pb-200 {
    padding-bottom: 200px ! important;
}

.pb-280 {
    padding-bottom: 280px ! important;
}



/** Margin **/
.mt-0 {
    margin-top: 0px !important;
}

.mt-5 {
    margin-top: 5px ! important;
}

.mt-10 {
    margin-top: 10px ! important;
}

.mt-12 {
    margin-top: 12px ! important;
}

.mt-15 {
    margin-top: 15px ! important;
}

.mt-20 {
    margin-top: 20px ! important;
}

.mt-25 {
    margin-top: 25px ! important;
}

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

.mt-35 {
    margin-top: 35px ! important;
}

.mt-40 {
    margin-top: 40px ! important;
}

.mt-45 {
    margin-top: 45px ! important;
}

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

.mt-60 {
    margin-top: 60px ! important;
}

.mt-65 {
    margin-top: 65px ! important;
}

.mt-70 {
    margin-top: 70px ! important;
}

.mt-80 {
    margin-top: 80px ! important;
}

.mt-90 {
    margin-top: 90px ! important;
}

.mt-100 {
    margin-top: 100px ! important;
}

.mt-120 {
    margin-top: 120px ! important;
}

.mt-130 {
    margin-top: 130px ! important;
}

.mt-140 {
    margin-top: 140px ! important;
}

.mt-150 {
    margin-top: 150px ! important;
}

.mt-160 {
    margin-top: 160px ! important;
}

.mt_5 {
    margin-top: -5px ! important;
}

.mt_10 {
    margin-top: -10px ! important;
}

.mt_15 {
    margin-top: -15px ! important;
}

.mt_20 {
    margin-top: -20px ! important;
}

.mt_25 {
    margin-top: -25px ! important;
}

.mt_30 {
    margin-top: -30px ! important;
}

.mt_35 {
    margin-top: -35px ! important;
}

.mt_40 {
    margin-top: -40px ! important;
}

.mt_50 {
    margin-top: -50px ! important;
}

.mt_55 {
    margin-top: -55px ! important;
}

.mt_60 {
    margin-top: -60px ! important;
}

.mt_65 {
    margin-top: -65px !important;
}

.mt_70 {
    margin-top: -70px ! important;
}

.mt_75 {
    margin-top: -75px ! important;
}

.mt_80 {
    margin-top: -80px ! important;
}

.mt_90 {
    margin-top: -90px ! important;
}

.mt_100 {
    margin-top: -100px ! important;
}

.mt_110 {
    margin-top: -110px ! important;
}

.mt_120 {
    margin-top: -120px ! important;
}

.mt_130 {
    margin-top: -130px ! important;
}

.mt_140 {
    margin-top: -140px ! important;
}

.mt_150 {
    margin-top: -150px ! important;
}

.mt_160 {
    margin-top: -160px ! important;
}

.mt_170 {
    margin-top: -170px ! important;
}

.mt_180 {
    margin-top: -180px ! important;
}

.mt_190 {
    margin-top: -190px ! important;
}

.mt_200 {
    margin-top: -200px ! important;
}

.mt_210 {
    margin-top: -210px ! important;
}

.mt_220 {
    margin-top: -220px ! important;
}

.mt_230 {
    margin-top: -230px ! important;
}

.mt_240 {
    margin-top: -240px ! important;
}

.mt_250 {
    margin-top: -250px ! important;
}

.mt_260 {
    margin-top: -260px ! important;
}

.mt_270 {
    margin-top: -270px ! important;
}

.mt_280 {
    margin-top: -280px ! important;
}

.mt_300 {
    margin-top: -300px ! important;
}

.mt_310 {
    margin-top: -310px ! important;
}

.mt_320 {
    margin-top: -320px ! important;
}

.mt_332 {
    margin-top: -332px ! important;
}

.mt_340 {
    margin-top: -340px ! important;
}

.mt_360 {
    margin-top: -360px ! important;
}

.mt_380 {
    margin-top: -380px ! important;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.mb-5 {
    margin-bottom: 5px ! important;
}

.mb-10 {
    margin-bottom: 10px ! important;
}

.mb-12 {
    margin-bottom: 12px ! important;
}

.mb-15 {
    margin-bottom: 15px ! important;
}

.mb-25 {
    margin-bottom: 25px ! important;
}

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

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

.mb-35 {
    margin-bottom: 35px ! important;
}

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

.mb-45 {
    margin-bottom: 45px ! important;
}

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

.mb-60 {
    margin-bottom: 60px ! important;
}

.mb-65 {
    margin-bottom: 65px ! important;
}

.mb-70 {
    margin-bottom: 70px ! important;
}

.mb-80 {
    margin-bottom: 80px ! important;
}

.mb-90 {
    margin-bottom: 90px ! important;
}

.mb-100 {
    margin-bottom: 100px ! important;
}

.mb-110 {
    margin-bottom: 110px ! important;
}

.mb-120 {
    margin-bottom: 120px ! important;
}

.mb-130 {
    margin-bottom: 130px ! important;
}

.mb-140 {
    margin-bottom: 140px ! important;
}

.mb-150 {
    margin-bottom: 150px ! important;
}

.mb-160 {
    margin-bottom: 160px ! important;
}

.mb-170 {
    margin-bottom: 170px ! important;
}

.mb-180 {
    margin-bottom: 180px ! important;
}

.mb-190 {
    margin-bottom: 190px ! important;
}

.mb-200 {
    margin-bottom: 200px ! important;
}

.mb_5 {
    margin-bottom: -5px ! important;
}

.mb_10 {
    margin-bottom: -10px ! important;
}

.mb_12 {
    margin-bottom: -12px ! important;
}

.mb_15 {
    margin-bottom: -15px ! important;
}

.mb_20 {
    margin-bottom: -20px ! important;
}

.mb_25 {
    margin-bottom: -25px ! important;
}

.mb_30 {
    margin-bottom: -30px ! important;
}

.mb_35 {
    margin-bottom: -35px ! important;
}

.mb_40 {
    margin-bottom: -40px ! important;
}

.mb_45 {
    margin-bottom: -45px ! important;
}

.mb_50 {
    margin-bottom: -50px ! important;
}

.mb_55 {
    margin-bottom: -55px ! important;
}

.mb_60 {
    margin-bottom: -60px ! important;
}

.mb_70 {
    margin-bottom: -70px ! important;
}

.mb_80 {
    margin-bottom: -80px ! important;
}

.mb_90 {
    margin-bottom: -90px ! important;
}

.mb_100 {
    margin-bottom: -100px ! important;
}

.mb_120 {
    margin-bottom: -120px ! important;
}

.mb_140 {
    margin-bottom: -140px ! important;
}

.ml-0 {
    margin-left: 0px !important;
}

.ml-10 {
    margin-left: 10px ! important;
}

.ml-15 {
    margin-left: 15px ! important;
}

.ml-20 {
    margin-left: 20px ! important;
}

.ml-30 {
    margin-left: 30px ! important;
}

.ml-40 {
    margin-left: 40px ! important;
}

.ml-50 {
    margin-left: 50px ! important;
}

.ml-60 {
    margin-left: 60px ! important;
}

.ml-70 {
    margin-left: 70px ! important;
}

.ml-80 {
    margin-left: 80px ! important;
}

.ml-90 {
    margin-left: 90px ! important;
}

.ml-100 {
    margin-left: 100px ! important;
}

.ml-110 {
    margin-left: 110px ! important;
}

.ml-120 {
    margin-left: 120px ! important;
}

.ml-120 {
    margin-left: 120px ! important;
}

.ml-130 {
    margin-left: 130px ! important;
}

.ml-140 {
    margin-left: 140px ! important;
}

.ml-150 {
    margin-left: 150px ! important;
}

.ml-160 {
    margin-left: 160px ! important;
}

.ml-170 {
    margin-left: 170px ! important;
}

.ml-180 {
    margin-left: 180px ! important;
}

.ml-190 {
    margin-left: 190px ! important;
}

.ml-200 {
    margin-left: 200px ! important;
}


.ml_10 {
    margin-left: -10px ! important;
}

.ml_15 {
    margin-left: -15px ! important;
}

.ml_20 {
    margin-left: -20px ! important;
}

.ml_25 {
    margin-left: -25px ! important;
}

.ml_30 {
    margin-left: -30px ! important;
}

.ml_35 {
    margin-left: -35px ! important;
}

.ml_40 {
    margin-left: -40px ! important;
}

.ml_50 {
    margin-left: -50px ! important;
}

.ml_60 {
    margin-left: -60px ! important;
}

.ml_70 {
    margin-left: -70px ! important;
}

.ml_80 {
    margin-left: -80px ! important;
}

.ml_90 {
    margin-left: -90px ! important;
}

.ml_100 {
    margin-left: -100px ! important;
}

.ml_110 {
    margin-left: -110px ! important;
}

.ml_120 {
    margin-left: -120px ! important;
}

.ml_130 {
    margin-left: -130px ! important;
}

.ml_140 {
    margin-left: -140px ! important;
}

.ml_150 {
    margin-left: -150px ! important;
}

.ml_160 {
    margin-left: -160px ! important;
}

.ml_180 {
    margin-left: -180px ! important;
}

.ml_200 {
    margin-left: -200px ! important;
}

.ml_210 {
    margin-left: -210px ! important;
}

.ml_220 {
    margin-left: -220px ! important;
}

.ml_240 {
    margin-left: -240px ! important;
}

.ml_260 {
    margin-left: -260px ! important;
}

.ml_280 {
    margin-left: -280px ! important;
}

.ml_300 {
    margin-left: -300px ! important;
}

.mr-0 {
    margin-right: 0px !important;
}

.mr-10 {
    margin-right: 10px ! important;
}

.mr-15 {
    margin-right: 15px ! important;
}

.mr-20 {
    margin-right: 20px ! important;
}

.mr-25 {
    margin-right: 25px ! important;
}

.mr-30 {
    margin-right: 30px ! important;
}

.mr-40 {
    margin-right: 40px ! important;
}

.mr-50 {
    margin-right: 50px ! important;
}

.mr-60 {
    margin-right: 60px ! important;
}

.mr-70 {
    margin-right: 70px ! important;
}

.mr-80 {
    margin-right: 80px ! important;
}

.mr-90 {
    margin-right: 90px ! important;
}

.mr-100 {
    margin-right: 100px ! important;
}

.mr-110 {
    margin-right: 110px ! important;
}

.mr-120 {
    margin-right: 120px ! important;
}

.mr-130 {
    margin-right: 130px ! important;
}

.mr-140 {
    margin-right: 140px ! important;
}

.mr-150 {
    margin-right: 150px ! important;
}

.mr-160 {
    margin-right: 160px ! important;
}

.mr-170 {
    margin-right: 170px ! important;
}

.mr-180 {
    margin-right: 180px ! important;
}

.mr-190 {
    margin-right: 190px ! important;
}

.mr-200 {
    margin-right: 200px ! important;
}

.mr_10 {
    margin-right: -10px ! important;
}

.mr_15 {
    margin-right: -15px ! important;
}

.mr_20 {
    margin-right: -20px ! important;
}

.mr_25 {
    margin-right: -25px ! important;
}

.mr_30 {
    margin-right: -30px ! important;
}

.mr_35 {
    margin-right: -35px ! important;
}

.mr_40 {
    margin-right: -40px ! important;
}

.mr_50 {
    margin-right: -50px ! important;
}

.mr_60 {
    margin-right: -60px ! important;
}

.mr_70 {
    margin-right: -70px ! important;
}

.mr_80 {
    margin-right: -80px ! important;
}

.mr_90 {
    margin-right: -90px ! important;
}

.mr_100 {
    margin-right: -100px ! important;
}

.mr_130 {
    margin-right: -130px ! important;
}

.mr_140 {
    margin-right: -140px ! important;
}

.mr_150 {
    margin-right: -150px ! important;
}

.mr_160 {
    margin-right: -160px ! important;
}

.mr_180 {
    margin-right: -180px ! important;
}

.mr_200 {
    margin-right: -200px ! important;
}

.mr_210 {
    margin-right: -210px ! important;
}

.mr_220 {
    margin-right: -220px ! important;
}

.mr_240 {
    margin-right: -240px ! important;
}

.mr_260 {
    margin-right: -260px ! important;
}

.mr_280 {
    margin-right: -280px ! important;
}

.mr_300 {
    margin-right: -300px ! important;
}




/* ===============================================
    Pre-loader
------------------------*/
.blobs-wrapper {
    position: fixed;
    z-index: 999999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    display: flex;
    text-align: center;
    margin: 0 auto;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

.loader-blob {
    width: 49px;
    height: 49px;
    border-radius: 50%;
    margin: 3em;
    text-align: center;
    display: block;
    margin: 0 auto;
    position: relative;
    vertical-align: middle;
}

.loader-blob,
.loader-blob:before,
.loader-blob:after {
    animation: 1.15s infinite ease-in-out;
    -o-animation: 1.15s infinite ease-in-out;
    -ms-animation: 1.15s infinite ease-in-out;
    -webkit-animation: 1.15s infinite ease-in-out;
    -moz-animation: 1.15s infinite ease-in-out;
}

.loader-blob:before,
.loader-blob:after {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.loader-blob {
    animation-name: loader-blob;
    -o-animation-name: loader-blob;
    -ms-animation-name: loader-blob;
    -webkit-animation-name: loader-blob;
    -moz-animation-name: loader-blob;
}

@keyframes loader-blob {
    from {
        transform: scale(0);
        opacity: 1;
    }

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

@-o-keyframes loader-blob {
    from {
        -o-transform: scale(0);
        opacity: 1;
    }

    to {
        -o-transform: scale(1);
        opacity: 0;
    }
}

@-ms-keyframes loader-blob {
    from {
        -ms-transform: scale(0);
        opacity: 1;
    }

    to {
        -ms-transform: scale(1);
        opacity: 0;
    }
}

@-webkit-keyframes loader-blob {
    from {
        -webkit-transform: scale(0);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}

@-moz-keyframes loader-blob {
    from {
        -moz-transform: scale(0);
        opacity: 1;
    }

    to {
        -moz-transform: scale(1);
        opacity: 0;
    }
}

/*  ===============================================
    SocialIcon / TooltipTop
------------------------*/
ul.social-icons {
    margin: 0;
    padding: 0;
}

.social-icons li {
    display: inline-block;
    border: none;
    z-index: 1;
    position: relative;
}

.social-icons li {
    margin: 0 2px;
}

.social-icons li:last-child {
    margin-right: 0px;
}

.social-icons li a {
    display: block;
    min-width: 26px;
    text-align: center;
}

.social-icons.circle li>a {
    border-width: 1px;
    border-style: solid;
    height: 33px;
    width: 33px;
    line-height: 33px;
    text-align: center;
    display: block;
    background-color: transparent;
    font-size: 13px;
    border-radius: 50%;
}


/* TooltipTop */
.tooltip-top {
    position: relative;
}

.tooltip:after,
.tooltip:before,
[data-tooltip]:after,
[data-tooltip]:before {
    position: absolute;
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(Opacity=0);
    opacity: 0;
    -webkit-transition: opacity .2s ease-in-out, visibility .2s ease-in-out, -webkit-transform .2s cubic-bezier(.71, 1.7, .77, 1.24);
    -moz-transition: opacity .2s ease-in-out, visibility .2s ease-in-out, -moz-transform .2s cubic-bezier(.71, 1.7, .77, 1.24);
    transition: opacity .2s ease-in-out, visibility .2s ease-in-out, transform .2s cubic-bezier(.71, 1.7, .77, 1.24);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    pointer-events: none;
}

.tooltip:before,
[data-tooltip]:before {
    z-index: 1001;
    border: 6px solid transparent;
    background: 0 0;
    content: "";
}

.tooltip-top:before,
.tooltip:before,
[data-tooltip]:before {
    margin-left: -6px;
    margin-bottom: -12px;
    border-top-color: inherit;
}

.tooltip-top:after,
.tooltip-top:before,
.tooltip:after,
.tooltip:before,
[data-tooltip]:after,
[data-tooltip]:before {
    bottom: 100%;
    left: 50%;
}

.tooltip-bottom:after {
    bottom: -100%;
}

.tooltip-bottom:before {
    margin-left: -6px;
    margin-bottom: -12px;
    border-top-color: transparent;
}

.tooltip-bottom:before {
    bottom: -7px;
}

.tooltip-top:focus:after,
.tooltip-top:focus:before,
.tooltip-top:hover:after,
.tooltip-top:hover:before,
.tooltip:focus:after,
.tooltip:focus:before,
.tooltip:hover:after,
.tooltip:hover:before,
[data-tooltip]:focus:after,
[data-tooltip]:focus:before,
[data-tooltip]:hover:after,
[data-tooltip]:hover:before {
    -webkit-transform: translateY(-12px);
    -moz-transform: translateY(-12px);
    transform: translateY(-12px);
}

.tooltip-top:after,
.tooltip:after,
[data-tooltip]:after {
    margin-left: -60px;
}

.tooltip:after,
[data-tooltip]:after {
    z-index: 1000;
    padding: 8px;
    width: 120px;
    color: #fff;
    content: attr(data-tooltip);
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    border-radius: 5px;
}

.tooltip:focus:after,
.tooltip:focus:before,
.tooltip:hover:after,
.tooltip:hover:before,
[data-tooltip]:focus:after,
[data-tooltip]:focus:before,
[data-tooltip]:hover:after,
[data-tooltip]:hover:before {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(Opacity=100);
    opacity: 1;
}


/*  ===============================================
    Slick_dots/arrows
------------------------*/
.slick-slide {
    border: 0;
    outline: 0;
    padding: 0 15px;
}

.slick_slider.no-gutters .slick-slide {
    padding: 0;
}

.slick-slide_ver-sep .slick-slide.slick-active:not(.slick-current)>div:after {
    position: absolute;
    content: "";
    top: 0;
    left: -15px;
    height: 100%;
    width: 1px;
    background-color: #e4e4e4;
}

.cmt-bgcolor-darkgrey .slick-slide_ver-sep .slick-slide.slick-active:not(.slick-current)>div:after,
.cmt-bgcolor-skincolor .slick-slide_ver-sep .slick-slide.slick-active:not(.slick-current)>div:after {
    background-color: rgba(255, 255, 255, .3);
}

.slick_slider.slick_slider-opacity_block .slick-list {
    overflow: visible;
}

.slick_slider.slick-dots-style1 .slick-dots,
.slick_slider.slick-dots-style2 .slick-dots,
.slick_slider.slick-dots-style3 .slick-dots {
    padding: 0;
    margin: 0;
    padding-top: 30px;
    top: 100%;
    line-height: 0;
}

.slick_slider.slick-dots-style1 .slick-dots li,
.slick_slider.slick-dots-style2 .slick-dots li,
.slick_slider.slick-dots-style3 .slick-dots li {
    display: inline-block;
    list-style: none;
    line-height: 0;
}

.slick_slider.slick-dots-style1 .slick-dots li {
    width: calc(19.3% - 0px);
}

.slick_slider.slick-dots-style1 .slick-dots li button {
    height: 4px;
    width: 100%;
    border: 0;
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 0;
    background-color: transparent;
    background-color: #e2e9f1;
}

.slick_slider.slick-dots-style1 .slick-dots li.slick-active button {
    margin: 0;
}

.slick_slider.slick-dots-style2 .slick-dots li button,
.slick_slider.slick-dots-style3 .slick-dots li button {
    height: 5px;
    width: 9px;
    border: 0;
    font-size: 0;
    padding: 0;
    position: relative;
    margin: 0 5px 0 0;
    background-color: #e2e9f1;
}

.slick_slider.slick-dots-style2 .slick-dots li.slick-active button,
.slick_slider.slick-dots-style3 .slick-dots li.slick-active button {
    width: 25px;
}

.slick_slider.slick-dots-style3 .slick-dots {
    position: absolute;
}

.slick_slider.slick-dots-style3 .slick-dots li button {
    height: 10px;
    width: 10px;
    border-radius: 50px;
}


.slick_slider .slick-arrow {
    height: 37px;
    width: 37px;
    border-radius: 5px;
    z-index: 1;
    border: 0;
    color: inherit;
    background-color: rgba(255, 255, 255, .07);
    box-shadow: 0 0 10px 0 rgba(0, 43, 92, 0.08);
    border: 0;
}

.slick_slider .slick-next {
    right: 0;
}

.slick_slider .slick-prev:before,
.slick_slider .slick-next:before {
    font-family: 'themify';
    font-size: 14px;
    line-height: 1;
    opacity: 1;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick_slider .slick-prev:before {
    content: "\e64a";
}

.slick_slider .slick-next:before {
    content: "\e649";
}

.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}


.slick_slider.slick-arrows-style1 .slick-arrow {
    border: 1px solid #dbdbdb;
    opacity: 0;
    z-index: 11;
    overflow: hidden;
    box-shadow: unset;
}

.slick_slider.slick-arrows-style1 .slick-next {
    right: 0px;
    left: auto;
}

.slick_slider.slick-arrows-style1 .slick-prev {
    left: 0px;
}

.slick_slider.slick-arrows-style1:hover .slick-arrow {
    margin: 0 -60px;
    opacity: 1;
    overflow: visible;
}


.slick_slider.slick-arrows-style2 .slick-arrow {
    top: -100px;
    box-shadow: unset;
}

.slick_slider.slick-arrows-style2 .slick-next {
    right: 27%;
    margin-right: -55px;
    left: auto;
}

.slick_slider.slick-arrows-style2 .slick-prev {
    left: 73%;
    margin-left: -25px;
}

.slick_slider.slick-arrows-style3 .slick-next,
.slick_slider.slick-arrows-style3 .slick-prev {
    font-size: 0;
    line-height: 0;
    position: absolute;
    bottom: 10px;
    top: auto;
    display: inline-block;
    width: 45px;
    height: 45px;
    text-align: center;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, .13);
    cursor: pointer;
    color: #fff;
}

.slick_slider.slick-arrows-style3 .slick-prev {
    left: -39%;
}

.slick_slider.slick-arrows-style3 .slick-next {
    left: -35%;
}



/*  ===============================================
    TopBar
------------------------*/
.top_bar {
    width: 100%;
    z-index: 3;
}

.top_bar_inner {
    margin-top: 15px;
    padding: 0px 29px 0 26px;
    margin-bottom: -23px;
    z-index: 2;
    display: flex;
    position: relative;
    border-radius: 5px;
}

.top_bar_icon {
    display: table-cell;
    vertical-align: middle;
}

.top_bar_contact_item .top_bar_icon i {
    font-size: 15px;
}

.top_bar_contact_item .top_bar_icon i,
.top_bar_contact_item span {
    color: var(--base-skin);
    font-weight: 700;
}

.top_bar_contact_item {
    font-size: 14px;
    height: 50px;
    line-height: 49px;
    position: relative;
    display: table;
}

.top_bar_contact_item:not(.with-icon) {
    padding-left: 18px;
    margin-left: 18px;
}

.top_bar_contact_item:not(.with-icon):after {
    content: "";
    height: 6px;
    width: 6px;
    background-color: rgba(255, 255, 255, 0.30);
    display: block;
    position: absolute;
    left: -3px;
    top: 22px;
    border-radius: 20px;
}

.text-base-white .top_bar_contact_item>a {
    color: rgba(255, 255, 255, 0.70);
}


/*  ===============================================
    Header
------------------------*/
/** SiteBrand(logo) **/
.site-branding {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/**  side-menu **/
.side-menu-container {
    position: absolute;
    right: 50px;
    top: 21px;
    left: auto;
}

.side-menu {
    position: relative;
}

.side-menu a {
    display: block;
    height: 38px;
    width: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 18px;
    background-color: var(--base-dark);
    color: #fff;
    border-radius: 5px;
}

.side-overlay .side {
    display: inline-block;
    position: fixed;
    height: 100%;
    top: 0;
    right: 0px;
    width: 420px;
    padding: 45px 35px 35px;
    z-index: 5;
    background-color: #ffffff;
    -webkit-transition: transform 0.4s ease;
    transition: transform 0.4s ease;
    -webkit-transform: translateX(420px);
    -ms-transform: translateX(420px);
    transform: translateX(420px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-image: url(../images/fltingbar-bg-img.jpg);
    background-position: 0% 0%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.side-overlay.on .side {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: .4s ease-out;
    -moz-transition: .4s ease-out;
    -o-transition: .4s ease-out;
    -ms-transition: .4s ease-out;
    transition: .4s ease-out;
}

.side .close-side {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 20px;
}

.side .cmt-detailss ul {
    padding-left: 0;
    padding-top: 15px;
}

.side .cmt-detailss ul>li {
    padding-bottom: 3px;
    list-style: none;
}

.side .cmt-detailss li span:first-child {
    color: rgba(255, 255, 255, .95);
}

.side .cmt-detailss li:first-child span:last-child {
    font-size: 18px;
    font-weight: 800;
    color: var(--base-skin);
}

.side .cmt-detailss ul>li a,
.side p {
    color: rgba(255, 255, 255, .6);
}

.side aside.widget_text {
    margin: 35px 0 35px;
    padding-top: 35px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.side aside.widget_text h3 {
    font-size: 19px;
    line-height: 30px;
    margin-bottom: 4px;
}

.side aside.widget_text .wrap-form.cta_form span.text-input {
    margin-bottom: 15px;
}

.side aside.widget_text .wrap-form.cta_form span.text-input input,
.side aside.widget_text .wrap-form.cta_form span.text-input textarea,
.side aside.widget_text .wrap-form.cta_form span.text-input select {
    border-radius: 5px;
    border: 0;
    background-color: #203d71;
    color: rgba(255, 255, 255, .40);
}


/* header_extra */
.header_extra {
    position: relative;
}

.header_extra>div {
    margin-left: 10px;
    position: relative;
}

.header_search {
    position: relative;
    padding-left: 30px;
    margin-left: 55px !important;
}

.header_search:before {
    display: block;
    content: "";
    position: absolute;
    height: 30px;
    width: 1px;
    left: 0;
    top: 0;
    background-color: #cdd3df;
}

.header_search .search_btn {
    position: relative;
    font-size: 18px;
    line-height: 29px;
    border: 1px solid transparent;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.header_search_content button.close-search {
    font-size: 16px;
    border: 0;
    border-radius: 0;
    padding: 0;
    height: 45px;
    position: absolute;
    left: 0;
    box-shadow: none;
}

.header_search_content button.close-search:after {
    position: absolute;
    content: '';
    height: 26px;
    width: 1px;
    border-right: 1px solid;
    right: -23px;
    top: 12px;
    opacity: .5;
}

.header_search .header_search_content {
    position: absolute;
    top: 64px;
    right: -20px;
    width: 616px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 22px 30px 23px;
    background: #ffffff !important;
    border-radius: 5px;
    opacity: 0;
    -webkit-box-shadow: 0 3px 5px rgb(0 0 0 / 10%);
    -ms-box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
    box-shadow: 0 0 10px 0 rgb(43 52 59 / 10%);
    z-index: -1;
    -webkit-transition: opacity 0.3s, top 0.3s;
    transition: opacity 0.3s, top 0.3s;
}

.header_search .header_search_content.on {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    z-index: -1;
}

.header_search .search_btn.open i {
    color: var(--base-skin);
}

.header_search .header_search_content #searchbox {
    position: relative;
}

.header_search .header_search_content #search_query_top {
    font-size: 14px;
    text-align: left;
    height: 45px;
    border: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    box-shadow: none !important;
    color: #333;
    width: 85%;
    line-height: 50px;
    float: left;
    padding: 16px 15px 12px 71px;
}

.header_search .header_search_content input::placeholder {
    color: #848e9f;
}

.header_search .header_search_content_inner .close_btn {
    position: absolute;
    right: 25px;
    top: 0;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    bottom: 0;
}

.header_search .header_search_content .close_btn i {
    font-size: 18px;
    line-height: 17px;
}

.header_btn .cmt-btn {
    padding: 10px 20px 14px 20px;
    padding-right: 0;
}

/** SiteNavigation(Menu) **/
.site-navigation {
    position: relative;
    z-index: 2;
}

nav.main-menu ul {
    position: relative;
    margin: 0;
}

#site-header-menu .site-navigation ul.menu>li>a {
    font-weight: 700;
    display: block;
    text-transform: capitalize;
    font-size: 16px;
    line-height: 1;
}

#site-header-menu .cmt-stickable-header .site-navigation ul.menu>li.active>a {
    color: var(--base-skin);
}


/* banner_slider */
.banner_slider.slick-slider .slick-prev,
.banner_slider.slick-slider .slick-next {
    opacity: 0;
    visibility: hidden;
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding-right: 3px;
    text-align: center;
    position: absolute;
    display: block;
    z-index: 1;
    margin: 0 20px;
    background: rgba(34, 54, 69, 0.5);
    border-radius: 50%;
}

.banner_slider.slick-slider .slick-next {
    right: 0;
    left: auto;
    padding-right: 0;
    padding-left: 3px;
}

.banner_slider.slick-slider:hover .slick-prev,
.banner_slider.slick-slider:hover .slick-next {
    opacity: 1;
    visibility: visible;
}

.banner_slider.slick-slider .slick-prev:hover,
.banner_slider.slick-slider .slick-next:hover {
    background: #000;
}

.banner_slider.slick-slider .slick-prev:before,
.banner_slider.slick-slider .slick-next:before {
    font-family: 'Font Awesome 5 Free';
    font-size: 14px;
    opacity: 1;
    color: #fff;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.banner_slider.slick-slider .slick-prev:before {
    content: "\f053";
}

.banner_slider.slick-slider .slick-next:before {
    content: "\f054";
}


/* banner_slide */
.slide {
    height: 680px;
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.slide .slide__img {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: absolute;
    left: 0;
}

.slide .slide__img img {
    opacity: 1;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    transition: all 1s ease;
}

.slide .slide__content {
    position: relative;
    height: 100%;
    display: flex;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
}

.slide .slide__content--headings {
    padding: 15px 0;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    align-items: center;
    transition: all 0.5s ease;
}

/* banner_slider_1 */
.banner_slider_1 .slide__content {
    background-color: rgba(0, 17, 62, 0.35);
}

.banner_slider_1 .slide__content--headings h2 {
    line-height: 112px;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 87px;
}

.banner_slider_1 .slide__content--headings>h3 {
    line-height: 50px;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 34px;
    margin-bottom: 0;
}

.banner_slider_1 .slide__content--headings p {
    color: rgb(220, 221, 222);
    line-height: 30px;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 21px;
}

/* banner_slider_2 */
.banner_slider_2 .slide__content--headings {
    padding: 15px 0;
    position: relative;
    z-index: 1;
    display: table;
    margin: 0 auto;
    transition: all 0.5s ease;
}

.banner_slider_2 .slide__content--headings h3 {
    text-align: left;
    line-height: 0;
}

.banner_slider_2 .slide__content--headings span.num {
    font-weight: 700;
    font-size: 18px;
    position: relative;
    padding-right: 200px;
}

.banner_slider_2 .slide__content--headings span.num:before {
    position: absolute;
    content: "";
    height: 2px;
    width: 100%;
    left: 0;
    bottom: 0;
}

.banner_slider_2 .slide__content--headings span {
    line-height: 30px;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 24px;
}

.banner_slider_2 .slide__content--headings h2 {
    display: inline-block;
    line-height: 102px;
    font-weight: 700;
    font-size: 87px;
    position: relative;
}

.banner_slider_2 .slide__content--headings h2:after {
    position: absolute;
    content: "";
    height: 6px;
    width: 46.5%;
    left: auto;
    right: 0;
    bottom: 0;
    z-index: -1;
}

/* banner_slider_3 */
.banner_slider_3_overlay .slide {
    height: 742px;
}

.banner_slider_3 .slide__content {
    background-color: rgba(0, 18, 62, 0.54);
}

.banner_slider_3 .slide__content--headings {
    padding: 15px 0;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    align-items: center;
    transition: all 0.5s ease;
}

.banner_slider_3 .slide__content--headings .quotes-1,
.banner_slider_3 .slide__content--headings .quotes-2 {
    width: 55%;
    height: 100%;
    padding-right: 120px;
    position: relative;
}

.banner_slider_3 .slide__content--headings .quotes-2 {
    padding-left: 100px;
    padding-right: 0;
}

.banner_slider_3 .slide__content--headings .quotes-1:after,
.banner_slider_3 .slide__content--headings .quotes-2:after {
    position: absolute;
    content: "";
    /* height: 100%; */
    width: 3px;
    right: 60px;
    top: -5%;
    bottom: -5%;
}

.banner_slider_3 .slide__content--headings .quotes-2:after {
    left: 0;
}

.banner_slider_3 .slide__content--headings .quotes-1 blockquote,
.banner_slider_3 .slide__content--headings .quotes-2 blockquote {
    line-height: 34px;
    letter-spacing: 0px;
    font-weight: 300;
    font-size: 18px;
    text-decoration: underline;
    font-style: italic;
    position: relative;
    padding: 60px 0 30px 0;
    margin: 0;
}

.banner_slider_3 .slide__content--headings .quotes-2 blockquote {
    text-decoration: none;
    padding: 20px 0 20px 0;
}

.banner_slider_3 .slide__content--headings .quotes-1 blockquote:before {
    content: "\f10d";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    font-size: 40px;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    top: 0;
    left: 0;
}

.banner_slider_3 .slide__content--headings h2 {
    line-height: 82px;
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 72px;
    margin-bottom: 20px;
}

.banner_slider_3 .slide__content--headings h3 {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0;
    font-weight: 400;
    margin-bottom: 10px;
}

.banner_slider_3 .slide__content--headings p {
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 16px;
}

@media only screen and (max-width: 1200px) {

    .banner_slider_3_overlay .slide {
        height: 660px;
    }

    .banner_slider_3 .slide__content--headings h2 {
        font-size: 62px;
        line-height: 72px;
    }
}

@media only screen and (max-width: 1024px) {

    .banner_slider .slide {
        height: 460px;
    }

    .banner_slider_1 .logo-icon img {
        max-height: 58px;
    }

    .banner_slider_1 .slide__content--headings h2 {
        font-size: 72px;
        line-height: 82px;
    }

    .banner_slider_3 .slide__content--headings h2 {
        font-size: 52px;
        line-height: 62px;
        margin-bottom: 10px;
    }

    .banner_slider_3 .slide__content--headings .quotes-2 {
        padding-left: 70px;
    }
}


@media only screen and (max-width: 991px) {

    .banner_slider_1 .slide__content--headings h2 {
        font-size: 55px;
        line-height: 65px;
    }

    .banner_slider_1 .slide__content--headings p {
        font-size: 16px;
        line-height: 26px;
    }

    .banner_slider_2 .slide__content--headings span.num {
        padding-right: 80px;
    }

    .banner_slider_2 .slide__content--headings span {
        font-size: 20px;
        line-height: 1;
    }

    .banner_slider_2 .slide__content--headings h2 {
        font-size: 60px;
        line-height: 70px;
    }

    .banner_slider_3 .slide__content--headings .quotes-1,
    .banner_slider_3 .slide__content--headings .quotes-2 {
        display: none;
    }

    .banner_slider_3 .slide__content--headings {
        text-align: center;
        display: block;
    }

    .banner_slider_3 .slide__content--headings p {
        padding: 0 0 15px 0;
        margin: auto;
        width: 70%;
    }

}

@media only screen and (max-width: 767px) {

    .banner_slider .slide {
        height: 400px;
    }

    .banner_slider .slide__content--headings p {
        display: none;
    }

    .banner_slider_1 .logo-icon img {
        max-height: 50px;
    }

    .banner_slider_2 .slide__content--headings h3 {
        text-align: center;
        margin-bottom: 15px;
    }

    .banner_slider_2 .slide__content--headings span.num {
        display: none;
    }

    .banner_slider_3 .slide__content--headings h2 {
        font-size: 46px;
        line-height: 56px;
        margin-bottom: 0;
    }
}


@media only screen and (max-width: 600px) {

    .banner_slider .slide {
        height: 300px;
    }

    .banner_slider_1 .logo-icon img {
        max-height: 40px;
    }

    .banner_slider_1 .cmt-icon {
        height: 50px;
        width: 50px;
        line-height: 50px;
        margin-bottom: 15px;
    }

    .banner_slider_1 .cmt-icon i {
        font-size: 32px;
    }

    .banner_slider_2 .slide__content--headings span {
        font-size: 18px;
        line-height: 1;
    }

    .banner_slider_1 .slide__content--headings h2 {
        font-size: 33px;
        line-height: 46px;
        margin-bottom: 0;
    }

    .banner_slider_2 .slide__content--headings h2 {
        font-size: 38px;
        line-height: 50px;
        margin-bottom: 0;
    }

    .banner_slider_3 .slide__content--headings h3 {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 5px;
    }

    .banner_slider_3 .slide__content--headings h2 {
        font-size: 33px;
        line-height: 46px;
        margin-bottom: 0;
    }


    .slide .cmt-btn.cmt-btn-size-md:not(.btn-inline) {
        padding: 9px 20px;
        font-size: 12px;
    }

}

@media only screen and (max-width: 480px) {

    .banner_slider .slide {
        height: 320px;
    }

}



/* /////////// IMAGE ZOOM /////////// */
.banner_slider .slide_img {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: right;
    background-size: cover;
}

.slick-active .slide_img {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear 0s;
    -moz-animation: imageAnimation 36s linear 0s;
    -o-animation: imageAnimation 36s linear 0s;
    -ms-animation: imageAnimation 36s linear 0s;
    animation: imageAnimation 36s linear 0s;
}

@keyframes imageAnimation {
    0% {
        animation-timing-function: ease-in;
    }

    8% {
        transform: scale(1.02);
        animation-timing-function: ease-out;
    }

    17% {
        transform: scale(1.04);
        animation-timing-function: ease-out;
    }

    22% {
        transform: scale(1.02);
    }

    25% {
        -transform: scale(1.1);
    }
}



/* ===============================================
    Footer
------------------------*/
.footer {
    z-index: 1;
    background-image: url(../images/footer-bg.png);
    background-color: #000a20;
    background-position: center bottom;
    background-attachment: scroll;
}

.footer>.cmt-bg-layer {
    background-color: #000a20;
    opacity: .25;
}

.footer.text-base-white,
.footer.text-base-white a {
    color: rgba(255, 255, 255, .65);
    position: relative;
    z-index: 1;
}

.footer.text-base-white a:hover {
    color: var(--base-skin) !important;
}

.footer .footer-logo {
    position: relative;
    margin-bottom: 24px;
}


.footer .social-icons li {
    font-weight: normal;
    text-align: center;
    position: relative;
    margin: 0 1px;
}

.footer .social-icons li a {
    width: 35px;
    height: 35px;
    line-height: 35px;
    margin: 0 5px 0 0px;
    text-align: center;
    display: block;
    background-color: transparent;
    font-size: 16px;
    color: rgba(255, 255, 255, 1) !important;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.footer .social-icons li a:hover {
    background-color: var(--base-skin);
    color: var(--base-white);
    border-color: var(--base-skin);
}

.footer .social-icons li a:hover i {
    color: var(--base-white);
}


.footer .widget .widget-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 25px;
    display: inline-block;
    position: relative;
}

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


/* second-footer */
.second-footer .widget-area .widget {
    padding: 80px 0 75px;
    position: relative;
    z-index: 2;
}

/* newsletter-form */
.newsletter_widget .widget-title {
    margin-bottom: 10px !important;
}

.newsletter-form {
    position: relative;
    margin-top: 20px;
    margin-bottom: 20px;
    clear: both;
    display: inline-block;
    width: 100%;
}

.newsletter-form input[type="email"] {
    padding: 12px 51px 11px 15px;
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.080);
    color: rgba(255, 255, 255, .67);
}

.newsletter-form button[type="submit"] {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 14px;
    font-weight: 700;
    height: 42px;
    width: 42px;
    line-height: 0;
    display: block;
    padding: 0;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.newsletter-form button[type="submit"] i {
    font-size: 17px;
}

/** menu-footer-quick-links **/
.widget .widget_nav_menu {
    display: inline-block;
    width: calc(48% - 1px);
}

.widget ul.menu-footer-quick-links li {
    display: block;
    padding: 0px 0px 15px 0;
    position: relative;
}

.widget ul.menu-footer-quick-links li:last-child {
    padding-bottom: 0;
}


/** widget_cta **/
.widget_cta h4 {
    font-size: 26px;
    line-height: 1;
    margin-bottom: 30px;
    color: var(--base-skin) !important;
}

ul.widget_contact_wrapper li {
    padding-left: 48px;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 20px;
    line-height: 25px;
    color: rgba(255, 255, 255, .75);
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

ul.widget_contact_wrapper li>a {
    display: block;
    color: var(--base-white) !important;
}

ul.widget_contact_wrapper li:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

ul.widget_contact_wrapper li i {
    position: absolute;
    left: 0;
    top: 2px;
    line-height: 1;
    font-size: 27px;
    font-weight: 400;
    color: var(--base-skin);
}

footer .g-map iframe {
    width: 100%;
    margin-top: 15px;
    filter: brightness(91%) contrast(126%) saturate(0%) blur(0px) hue-rotate(0deg);
    border-radius: 5px;
}

/** copyright **/
.copyright .cpy-text {
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: 14px;
    text-align: center;
    color: rgba(255, 255, 255, .65) !important;
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.20);
}

.copyright .cpy-text .u1 a {
    font-size: 15px;
}

.copyright .cpy-text .u1 a:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    bottom: -2px;
    left: 0;
    border-bottom: 1px solid currentColor;
}

.copyright .cpy-text .u1.text-base-skin a {
    color: var(--base-skin) !important;
}

.copyright .cpy-text .u1.text-green a {
    color: #82b440 !important;
}


/* ===============================================
    GoTop BUtton
------------------------*/
#totop {
    font-weight: 900;
    color: #fff;
    display: none;
    position: fixed;
    right: 34px;
    bottom: 50px;
    z-index: 999;
    height: 0;
    width: 0;
    font-size: 0;
    text-align: center;
    padding-top: 3px;
    line-height: 34px;
    border-radius: 3px;
    transition: .3s ease-in-out;
}

#totop.top-visible {
    height: 40px;
    width: 40px;
    font-size: 22px;
    display: inline;
    background-color: var(--base-skin);
}

@keyframes jump {
    0% {
        bottom: 20px;
    }

    50% {
        bottom: 40px;
    }

    100% {
        bottom: 20px;
    }
}

#totop.top-visible {
    animation: jump 4s infinite;
}


/* ===============================================
    Page-Title-Row
------------------------*/
.cmt-page-title-row {
    background-image: url(../images/pagetitle-bg.jpg);
    width: 100%;
    background-size: cover;
    background-position: center bottom;
    position: relative;
    z-index: 1;
}

.cmt-page-title-row.cmt-bg.cmt-bgimage-yes>.cmt-titlebar-wrapper-bg-layer {
    opacity: .01;
}

.cmt-page-title-row-inner {
    width: 100%;
    text-align: center;
    position: relative;
    padding: 42px 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title-heading h2 {
    text-transform: capitalize;
    font-weight: 700;
    text-transform: capitalize;
    font-size: 40px;
    line-height: 45px;
    display: inline-block;
    margin-bottom: 15px;
}

.breadcrumb-wrapper {
    z-index: 99;
    margin-bottom: 15px;
    text-align: center;
    display: inline-block;
}

.breadcrumb-wrapper span {
    font-weight: 400;
    text-transform: capitalize;
    font-size: 14px;
    line-height: 25px;
    position: relative;
    color: var(--base-skin);
}

.breadcrumb-wrapper span:first-child {
    padding-right: 16px;
}

.breadcrumb-wrapper span:first-child a {
    color: #fff;
}

.breadcrumb-wrapper span:first-child:after {
    position: absolute;
    content: "  /  ";
    width: 9px;
    height: 9px;
    right: 5px;
    display: inline-block;
    color: rgba(255, 255, 255, 1);
}


/* ===============================================
    Inner-Pages
------------------------*/

/*------------------------------------------------------------------------------*/
/*  single_services
/*------------------------------------------------------------------------------*/
.cmt-service-single-content-area div:not(.featured-title)>h3 {
    font-size: 30px;
    line-height: 40px;
}

.cmt-service-single-content-area p:not(:last-child) {
    margin-bottom: 25px;
}

.cmt-service-single-content-area .ttm_fatured_image-wrapper {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

.cmt-service-single-content-area img {
    width: 100%;
}


/*------------------------------------------------------------------------------*/
/*  single_team
/*------------------------------------------------------------------------------*/
.cmt-team-member-single-content h3,
.cmt-team-member-content h3 {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 20px;
}

.cmt-team-member-single-content .cmt-featured-wrapper img {
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius: 10px;
}

.cmt-team-member-detail {
    padding: 37px 30px 0;
    border-radius: 5px;
    background-color: var(--base-grey);
}

.cmt-team-member-detail .cmt-team-member-single-title {
    font-size: 30px;
    line-height: 32px;
    margin-bottom: 8px;
}

.cmt-team-member-detail .cmt-team-member-single-position {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--base-skin);
}

.cmt-team-member-detail .cmt-short-desc {
    margin: 12px 0 11px;
}

.cmt-team-member-detail ul {
    margin: 0;
    padding: 0;
}

.cmt-team-details-list li {
    position: relative;
    font-size: 15px;
    line-height: 24px;
    display: block;
    padding: 7px 0 5px 0;
    width: 100%;
}

.cmt-team-details-list .cmt-team-list-title,
.cmt-team-details-list .cmt-team-list-value,
.cmt-team-details-list .cmt-team-list-value a {
    display: inline-block;
    color: var(--body-font-color) !important;
}

.cmt-team-details-list .cmt-team-list-value a:hover {
    color: var(--base-skin) !important;
}

.cmt-team-details-list .cmt-team-list-title {
    position: relative;
    font-weight: 600;
    font-size: 16px;
    line-height: 30px;
    color: var(--base-dark) !important;
}

.cmt-team-member-detail .cmt-social-links-wrapper ul li a {
    display: block;
    font-size: 16px;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #e7e7e7;
    border-radius: 5px;
    margin-right: 0;
    background-color: #fff;
}

.cmt-team-member-detail .cmt-social-links-wrapper ul li a:hover {
    background-color: var(--base-skin);
    color: var(--base-white);
}

.cmt-team-member-detail .cmt-social-links-wrapper {
    padding: 14px 0 10px;
}

.cmt-team-member-content {
    padding-top: 35px;
}



/*------------------------------------------------------------------------------*/
/*  Project_Blog
/*------------------------------------------------------------------------------*/
.cmt-pf-detail-box {
    position: relative;
}

.cmt-pf-detail-box .ttm_pf_image-wrapper {
    border-radius: 10px;
    overflow: hidden;
}

.cmt-pf-single-detail-box {
    padding: 42px 0 0;
}

.cmt-pf-single-detail-box .cmt-pf-single-detail-box-title h4 {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 15px;
}

.cmt-pf-single-detail-box ul {
    list-style: none;
    padding-left: 0;
    overflow: hidden;
    margin-top: 0;
    padding-bottom: 32px;
    border-bottom: 1px solid #e6e9ef;
}

.cmt-pf-single-detail-box ul li {
    position: relative;
    display: block;
    padding: 15px 0 15px 0;
    position: relative;
    display: inline-block;
    padding: 15px 55px 0px 0;
}

.cmt-pf-single-detail-box ul li>span {
    display: inline;
    font-size: 18px;
}

.cmt-pf-single-detail-box ul li>span:first-child {
    font-weight: 600;
    font-size: 18px;
    color: var(--base-skin);
}

.cmt-pf-single-detail-box ul li:last-child {
    padding-right: 0;
}

.cmt-pf-single-content-area {
    padding-top: 15px;
}

.cmt-pf-single-content-area h2 {
    text-align: left;
    font-size: 32px;
    line-height: 1;
    margin-bottom: 25px;
}

.cmt-pf-single-content-area .social-media-block {
    display: block;
    clear: both;
    padding: 3px 0 25px;
    border-bottom: 1px solid #e6e9ef;
}

.cmt-pf-single-content-area .social-icons li>a {
    border: 1px solid #e7e7e7;
    background-color: transparent;
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    display: block;
    font-size: 14px;
    border-radius: 5px;
    color: #676b72;
}

.cmt-pf-single-content-area .social-icons li>a:hover {
    border-color: var(--base-white);
    color: var(--base-white);
    background-color: var(--base-skin);
}

.cmt-pf-single-content-area .cmt-pf-single-category span {
    color: var(--base-skin);
    font-size: 15px;
    font-weight: 600;
}

.cmt-pf-single-content-area .cmt-pf-single-category a:not(:hover) {
    color: inherit;
}

.cmt-pf-single-content-area .cmt-pf-single-category a {
    font-style: italic;
}

.cmt-nextprev-bottom-nav {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}



/*------------------------------------------------------------------------------*/
/*  Classic_Blog
/*------------------------------------------------------------------------------*/
article.cmt-blog-classic {
    margin-bottom: 30px;
    padding-bottom: 0;
    border-radius: 5px;
    overflow: hidden;
}

article.cmt-blog-classic:last-child {
    margin-bottom: 15px;
}

article.cmt-blog-classic .cmt-post-featured-wrapper {
    position: relative;
    overflow: hidden;
}

article.cmt-blog-classic .cmt-blog-classic-content {
    background: var(--base-grey);
    padding: 22px 30px 32px;
    z-index: 11;
    position: relative;
    display: block;
    border: 0;
    overflow: hidden;
    border-radius: 5px;
}

.cmt-blog-classic .cmt-box-post-cat {
    z-index: 1;
    top: 10px;
    left: 9px;
    font-size: 13px;
    font-weight: 500;
    width: auto;
    padding: 0 14px 2px;
    position: absolute;
    background-color: var(--base-skin);
    color: var(--base-white);
    border-radius: 5px;
    ;
}

.cmt-blog-classic .cmt-box-post-cat a {
    color: var(--base-white);
}

.cmt-blog-classic .post-meta,
.cmt-blog-single .post-meta {
    display: block;
    padding: 8px 0 11px;
}

.cmt-blog-classic .post-meta .cmt-meta-line,
.cmt-blog-single .post-meta .cmt-meta-line {
    padding-right: 15px;
    position: relative;
    color: inherit;
}

.cmt-blog-classic .post-meta .cmt-meta-line a,
.cmt-blog-single .post-meta .cmt-meta-line a {
    color: var(--body-font-color);
}

.cmt-blog-classic .post-meta .cmt-meta-line:last-child {
    padding-right: 0;
}

.cmt-blog-classic .post-meta .cmt-meta-line i,
.cmt-blog-single .post-meta .cmt-meta-line i {
    padding-right: 4px;
    color: var(--base-skin);
}

.cmt-blog-classic .entry-header .entry-title {
    font-size: 26px;
    line-height: 30px;
    position: relative;
    margin-bottom: 12px;
}


/*------------------------------------------------------------------------------*/
/*  Single_Blog
/*------------------------------------------------------------------------------*/
.cmt-blog-single .cmt-post-featured-wrapper {
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 20px;
}

.cmt-blog-single .post-meta {
    display: block;
    padding: 5px 0 15px 0;
}

.cmt-blog-single h3 {
    font-size: 24px;
    line-height: 36px;
    margin-top: 20px;
}

.cmt-blog-single blockquote {
    display: block;
    background: #fff;
    position: relative;
    text-align: center;
    padding: 93px 40px 15px 40px;
    margin: 38px 0 35px 0;
    min-height: 100px;
    border: none;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    line-height: 28px;
    background-color: var(--base-grey);
    border-radius: 5px;
    ;
}

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

.cmt-blog-single blockquote:before {
    content: '';
    display: block;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: 35px;
    width: 44px;
    text-align: center;
    margin: 0 auto;
    -webkit-mask: url(../images/quote-1.svg);
    mask: url(../images/quote-1.svg);
    -webkit-mask-box-image: url(../images/quote-1.svg);
    background-color: var(--base-skin);
}

.cmt-blog-single blockquote cite {
    text-align: center;
    font-weight: 600;
    font-style: normal;
    color: var(--base-dark);
}

.cmt-blog-single .ttm_tag_lists {
    font-size: 15px;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 10px;
}

.cmt-blog-single .ttm_tag_lists .cmt-tags-links-title {
    color: var(--base-skin);
}

.cmt-blog-single .social-media-block .cmt-tags-links a {
    font-size: 15px;
    font-style: italic;
    display: inline-block;
    font-weight: normal;
    color: var(--body-font-color);
}

.cmt-blog-single .cmt-social-share-wrapper ul {
    display: inline-flex;
    padding-top: 15px;
}

.cmt-blog-single .cmt-social-share-wrapper ul li {
    display: inline-block;
    margin: 0;
    padding: 0 30px 10px 0;
}

.cmt-blog-single .cmt-social-share-wrapper ul li:last-child {
    padding-right: 0;
}

.cmt-blog-single .cmt-social-share-wrapper ul li a {
    border: 1px solid transparent;
    padding: 15px 7px 15px 0;
    width: 169px;
    text-align: center;
    display: block;
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    border-radius: 0;
    color: #fff;
    border-radius: 5px;
}

.cmt-blog-single .cmt-social-share-wrapper ul li.facebook a {
    background-color: #385da9;
}

.cmt-blog-single .cmt-social-share-wrapper ul li.twitter a {
    background-color: #3cf;
}

.cmt-blog-single .cmt-social-share-wrapper ul li.pinterest a {
    background-color: #bd081c;
}

.cmt-blog-single .cmt-social-share-wrapper ul li.linkedin a {
    background-color: #0073b1;
}

.cmt-blog-single .cmt-social-share-wrapper ul li a:hover {
    background-color: var(--base-skin);
}


/*blog-comment*/
.comments-area {
    padding-top: 25px;
    margin-bottom: 0;
}

.comments-area h3.comment-reply-title {
    font-size: 29px;
    line-height: 36px;
    margin-bottom: 15px;
}

.comments-area p {
    margin-bottom: 15px;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    border-radius: 5px;
    vertical-align: middle;
    width: 100%;
    color: #8d8d8d;
    padding: 12px 15px;
    font-weight: 400;
    background-color: #fff;
    text-transform: inherit;
    border: 1px solid rgba(119, 119, 119, .2);
    font-size: 14px;
    line-height: inherit;
}

.comments-area .comment-form .comment-form-author,
.comments-area .comment-form .comment-form-email,
.comments-area .comment-form .comment-form-url {
    position: relative;
    float: left;
    width: 32%;
    margin-right: 2%;
}

.comments-area .comment-form .comment-form-url {
    margin-right: 0;
}


/*------------------------------------------------------------------------------*/
/*  Contact_page
/*------------------------------------------------------------------------------*/
.ttm_contact_widget_wrapper {
    position: relative;
    z-index: 1;
    overflow: visible;
    clear: both;
    padding: 40px 30px;
    padding-left: 35px;
}

@media (min-width: 992px) {
    .ttm_contact_widget_wrapper:before {
        position: absolute;
        content: '';
        right: -20px;
        top: 46%;
        margin: 0 auto;
        border-bottom: 20px solid transparent;
        border-top: 20px solid transparent;
        border-left-width: 20px;
        border-left-style: solid;
        z-index: 9;
    }
}

.ttm_contact_widget_wrapper ul {
    padding: 0;
    margin: 0;
    z-index: 2;
    list-style: disc;
    clear: both;
    padding-left: 23px;
}

.ttm_contact_widget_wrapper li {
    margin-bottom: 25px;
    text-align: right;
    font-size: 22px;
    font-weight: 600;
}

.ttm_contact_widget_wrapper li h6 {
    text-align: left;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 5px;
}

.ttm_contact_widget_wrapper li span {
    font-size: 16px;
    line-height: 26px;
    font-weight: normal;
}


/*------------------------------------------------------------------------------*/
/*  Error_page
/*------------------------------------------------------------------------------*/
section.error-404 {
    padding: 60px 0 80px;
    text-align: center;
}

section.error-404 .cmt-404-img {
    margin-bottom: 35px;
}

section.error-404 .page-content p {
    font-size: 18px;
    margin-bottom: 30px;
}

#toggleButton {
    position: fixed;
    bottom: 10px; /* Increased for better visibility on small devices */
    right: 10px; /* Increased for better visibility on small devices */
    z-index: 999;
    background-color: #ed6904;
    color: #fff;
    padding: 10px; /* Adjust padding for better touch target */
    border: 3px solid rgb(8, 189, 72);
    border-radius: 10px 0px 0px 10px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    height: 80px;
    width: 100px; /* Ensures a square shape for consistent look */
   
    
}

/* Hover effect for desktop users */
#toggleButton:hover {
    background-color: #13a102;
    border-color: rgb(6, 160, 62);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #toggleButton {
        bottom: 20px; /* Raised for mobile navigation bar spacing */
        right: 20px; /* Raised for mobile navigation bar spacing */
        padding: 8px; /* Slightly reduced padding for smaller screens */
        height: 45px; /* Adjust size for smaller screens */
        width: 45px;
    }
}


/*------------------------------------------------------------------------------*/
/*  Map
/*------------------------------------------------------------------------------*/
#map {
    display: block;
    height: 220px;
    width: 100%;
}

#map iframe {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    filter: brightness(91%) contrast(126%) saturate(0%) blur(0px) hue-rotate(0deg);
    border-radius: 5px;
}

/* <======================================= Whatapp and calll =============================> */



.blink {
    animation: blinker 1s linear infinite;
}

@keyframes blink {
    0% {
        box-shadow: 0 0 0 0 rgba(228, 225, 225, 0.9); /* Start with small red shadow */
    }
    60% {
        box-shadow: 0 0 14px 14px rgba(255, 0, 0, 0); /* Expand and fade out */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); /* Reset to no shadow */
    }
}

/* Style for the element */
.blinking-box {
    width: 50px;
    height: 50px;
    background-color: white; /* White background for visibility */
    border-radius: 50%; /* Make the box circular */
    animation: blinker 1.5s infinite ease-out; /* Apply the blinker animation */
}

.smsIcon {
    height: 40px;
    width: 50px;
    border-radius: 50%;
    position: relative;
    margin-left: 20px;
    font-weight: 800;
    margin-top: -20px;
}


.hidden {
    display: none;
}

#toggleButton {
    position: fixed;
    bottom: 1px;
    right: 1px;
    z-index: 999;
    background-color: #10ba0a;
    color: #fff;
    padding: 5px 5px;
    border: none;    
    border: 3px solid rgb(89, 202, 9);
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50px;
    width: 50px;
    border-radius: 3px; /* Slightly rounded corners for a modern look */
    animation: blink 3s infinite; /* Apply blinking animation */

}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    60% {
        opacity: 0;
    }
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    #toggleButton {
        height: 40px; /* Reduce size for smaller screens */
        width: 40px;
        padding: 3px; /* Adjust padding */
        border-width: 2px; /* Reduce border size */
    }
}

@media (max-width: 480px) {
    #toggleButton {
        height: 35px; /* Further reduce size for very small screens */
        width: 30%;
        padding: 0px;
    }
}


.btn-whatsapp-pulse {
    background: #25d366;
    z-index: 1000; /* Ensure visibility */
    color: white;
    position: fixed; /* Fixed positioning for correct placement */
    bottom: 60px; /* Position above the bottom of the viewport */
    right: 20px; /* Align to the right */
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    text-decoration: none;
    border-radius: 50%;
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    background-image: url("../Imageswhatapp/Whatapp.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.callbackfuncation {
    background: #25d366;
    z-index: 999; /* Slightly lower than .btn-whatsapp-pulse */
    color: white;
    position: fixed; /* Fixed positioning for correct placement */
    bottom: 120px; /* Position above .btn-whatsapp-pulse */
    right: 20px; /* Align to the right */
    font-size: 40px;
    display: flex;
    justify-content: center; /* Center the content */
    align-items: center;
    width: 45px;
    height: 45px;
    text-decoration: none;
    border-radius: 50%;
    animation-name: pulse;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    background-image: url("../Imageswhatapp/Call.png");
    background-repeat: no-repeat;
    background-size: cover;
}



@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(13, 249, 33, 0.5);
    }
    100% {
        box-shadow: 0 0 0 14px rgba(235, 46, 4, 0);
    }
}

/* <---------------------------------------------------------------------------------------> */


/* Example CSS - adjust as needed */
.featured-icon-box {
    background: #f9f9f9;
    padding: 20px;
    margin-bottom: 20px;
}

.featured-title h3 {
    font-size: 20px;
    color: #333;
}

.featured-desc p {
    color: white;
}

.cmt-btn {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
}

.cmt-btn:hover {
    background-color: #0056b3;
}


.bg_icon {
    position: relative;
    overflow: hidden;
}

.normal-img {
    display: block;
}

.hover-img {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.featured-icon-box:hover .normal-img {
    display: none; /* Hide normal image on hover */
}

.featured-icon-box:hover .hover-img {
    display: block; /* Show hover image on hover */
}


.software_development, img {
    max-width: 100%; /* Allow the image to be responsive */
    height: auto; /* Maintain aspect ratio */
    mix-blend-mode: multiply; /* Blend mode for transparency */
    opacity: 1; /* Ensure the image is fully visible */
    display: block; /* Make sure the image is treated as a block element */
}


.featured-icon,img {
    max-width: 60px;
    width: 200px;
    border-radius: 1px;
    
}


.cmt_single_image-wrapper {
    width: 100%;
    max-width: 1400px;
    border-radius: 10px;
    height: auto;    
    border: 4px solid rgba(39, 109, 248, 0.347);
    overflow: hidden;
    display: table;
    margin-top: 15px; /* Adjusts only on screens smaller than 991px if using media queries */
}

.cmt_single_image-wrapper img {
    border-radius: 1px;
    width: 100%;
    height: auto; /* Maintains aspect ratio */
    object-fit: cover; /* Ensures the image covers the entire container */
}


.landing-Aboutus {
    background: white url("../images/bg-image/bg-images.png") no-repeat center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 60vh; /* Initial height for larger screens */
}

@media (max-width: 768px) {
    .landing-Aboutus {
        height: 50vh; /* Adjust height for tablets and smaller screens */
    }
}

@media (max-width: 480px) {
    .landing-Aboutus {
        height: 40vh; /* Further adjust height for very small screens (mobile) */
    }
}

 
 .landing-Aboutus .wrapper {
    background-color: rgba(18, 141, 124, 0.5);
    height: 100%;
    width: 100%;
    position: 1px;
 }
 
 
 .display-1 {
    color: red;
    font-weight: 700;
    text-align: center;
    font-size: 60px;
 }
 
.spain {
    color: white;
}


.future-img {
    background: white url("../images/Website-img.jpg") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 70vh;
    border: 3px solid #eceaf5;
    margin-top: 30px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .future-img {
        height: 50vh; /* Adjust height for smaller screens */
    }
}

@media (max-width: 480px) {
    .future-img {
        height: 40vh; /* Adjust height for very small screens */
    }
}


 .us {
    color: rgb(3, 3, 92);
 }

 .redcolor {
    color:red;
    font-weight: 800;
    font-size: 26px;
 }


 .contact-title {
    text-decoration: underline; /* Adds an underline */
    font-size: 1.5rem;   
    color:red;       /* Adjust font size if needed */
 }

 /* <======================================================================> */

/* Base Styles */
.landing-software {
    background: white url("../images/bg-image/softwaredevelopment.png") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 80vh;
    /* border: 3px solid #eceaf5; */
  
    display: flex; /* Align items flexibly */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    box-sizing: border-box; /* Include padding/border in size */
    overflow: hidden; /* Prevent content overflow */
}

/* Wrapper Styling */
.landing-software .wrapper {
    background-color: rgba(3, 51, 47, 0.5); /* Semi-transparent overlay */
    height: 100%;
    width: 100%;
    border-radius: 10px; /* Consistent radius */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Media Queries for Responsiveness */

/* Medium Devices (Tablets, Small Laptops) */
@media (max-width: 1024px) {
    .landing-software {
        height: 70vh; /* Adjust height for medium screens */
        background-size: contain; /* Ensure the image fits within the container */
    }

    .landing-software .wrapper {
        padding: 15px; /* Reduce padding for smaller devices */
    }
}

/* Small Devices (Tablets, Large Phones) */
@media (max-width: 768px) {
    .landing-software {
        height: 60vh; /* Further reduce height for smaller screens */
        background-size: contain; /* Maintain proper scaling of the image */
    }

    .landing-software .wrapper {
        padding: 10px; /* Adjust padding for compact layouts */
    }
}

/* Very Small Devices (Phones) */
@media (max-width: 480px) {
    .landing-software {
        height: auto; /* Let height adjust to content */
        padding: 10px; /* Add minimal padding */
        background-size: contain; /* Ensure the image fits properly */
        background-position: top center; /* Adjust image alignment */
    }

    .landing-software .wrapper {
        padding: 5px; /* Minimal padding for very small screens */
    }
}


 .developer {
    color: white;
 }

 .background 
 {
    background-color: #fe9012;
    color: black;
    border-radius: 2px;
    font-weight: 900;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }

/* 
 >======================================================================> */


 .software_deveploment_ERP {
    background: white url("../images/softwar-img/300-SM1084994.jpg") no-repeat center center;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 80vh;
    border: 3px solid #eceaf5;
    border-radius: 10px;
    display: flex; /* For proper alignment */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    padding: 20px; /* Add padding for spacing */
    box-sizing: border-box; /* Include padding in width/height */
}

/* Media Queries for Responsiveness */
@media (max-width: 1024px) {
    .software_deveploment_ERP {
        height: 50vh; /* Reduce height for medium screens */
        background-size: contain; /* Adjust background image scaling */
    }
}

@media (max-width: 768px) {
    .software_deveploment_ERP {
        height: auto; /* Allow height to adjust to content */
        padding: 20px; /* Add padding for spacing */
    }
}

@media (max-width: 480px) {
    .software_deveploment {
        height: auto; /* Allow height to adjust */
        padding: 10px; /* Reduce padding for small screens */
        background-size: contain; /* Ensure the background image fits */
        background-position: top center; /* Adjust positioning for smaller screens */
    }
}

 

 .landing-MobileApp {
    background: white url("../images/mobile-app-development.png") no-repeat center center;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    border: 1px solid #eceaf5;
    border-radius: 6px;
    display: flex; /* For proper alignment */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    padding: 20px; /* Add padding for smaller screens */
    box-sizing: border-box; /* Include padding in width/height */
}

.landing-MobileApp .wrapper {
    
    width: 100%;
    max-width: 1200px; /* Set a max-width for better layout */
    margin: 0 auto; /* Center wrapper content */
    height: auto; /* Allow height to adjust based on content */
    padding: 20px; /* Add padding for spacing */
    box-sizing: border-box; /* Include padding in width/height */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .landing-MobileApp {
        height: auto; /* Allow the section to adjust based on content */
        padding: 40px 20px; /* Increase padding for smaller devices */
    }

    .landing-MobileApp .wrapper {
        padding: 20px; /* Adjust padding for smaller screens */
    }
}

@media (max-width: 480px) {
    .landing-MobileApp {
        padding: 20px 10px; /* Smaller padding for very small screens */
    }

    .landing-MobileApp .wrapper {
        padding: 10px; /* Adjust padding for smaller devices */
    }
}

.Mobile_deveploment-img{
    background: white url("../images/MobileDevlopment-img.png") no-repeat center center;
    background-size: cover;
    width: 100%;     
    margin-top: 30px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .future-img {
        height: 50vh; /* Adjust height for smaller screens */
    }
}

@media (max-width: 480px) {
    .future-img {
        height: 40vh; /* Adjust height for very small screens */
    }
}



.Mobile_deveploment-img {
    
    width: 100%;
    background-size: cover;
    height: 80vh;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.Mobile_deveploment-img .wrapper {
    background-color: rgba(0, 0, 0, 0.7); /* Overlay effect */
    height: 90%;
    width: 90%;
    border-radius: 7px;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Media Queries for Responsiveness */
@media (max-width: 1024px) {
    .Mobile_deveploment-img {
        height: 70vh; /* Reduce height for medium screens */
        padding: 15px;
    }
    .Mobile_deveploment-img .wrapper {
        height: 95%; /* Adjust wrapper height for medium screens */
        width: 95%; /* Adjust wrapper width for medium screens */
        padding: 15px;
    }
}

@media (max-width: 768px) {
    .Mobile_deveploment-img {
        height: 80vh; /* Further reduce height for smaller screens */
        background-size: contain; /* Adjust background image scaling */
    }
    .Mobile_deveploment-img .wrapper {
        height: 100%; /* Full height for compact devices */
        width: 100%; /* Full width for compact devices */
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .Mobile_deveploment-img {
        height: auto; /* Let height adjust to content */
        background-size: contain; /* Ensure background image fits */
        padding: 10px; /* Minimal padding for small screens */
    }
    .Mobile_deveploment-img .wrapper {
        height: auto;
        width: 100%;
        padding: 5px;
        text-align: center; /* Center content for smaller devices */
    }
}



.ERP_software_deveploment {
    background: white url("../images/bg-image/ERP_SOFTWARE.png") no-repeat center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 60%;
    height: 95vh; /* Initial height for larger screens */
    background-position: center;   
    border-radius: 6px;
    
}

@media (max-width: 768px) {
    .ERP_software_deveploment {
        height: 60vh; /* Adjust height for tablets and smaller screens */
        width: 100%;        
        display: flex;
    }
}

@media (max-width: 480px) {
    .ERP_software_deveploment  {
        height: 40vh; /* Further adjust height for very small screens (mobile) */
        width: 100%;        
       
    }
}


.ERP_software_deveploment .wrapper {
    
    height: 100%;
    width: 100%;
    border-radius:5px; /* Match the border radius for consistency */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
    box-sizing: border-box;
}


/* ========================================================================= */

.landing-websitedesing {
    background: white url("../images/bg-image//Websitedesing.jpg") no-repeat center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh; /* Initial height for larger screens */
}

@media (max-width: 768px) {
    .landing-websitedesing {
        height: 50vh; /* Adjust height for tablets and smaller screens */
    }
}

@media (max-width: 480px) {
    .landing-websitedesing {
        height: 40vh; /* Further adjust height for very small screens (mobile) */
    }
}

 
 .landing-websitedesing .wrapper {
   
    height: 100%;
    width: 100%;
    position: 1px;
 }


 
.WebsiteDegisning {
    background: white url("../images/bg-image/WebDesing.png") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 70vh;
    border: 3px solid #eceaf5;
    margin-top: 30px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .future-img {
        height: 50vh; /* Adjust height for smaller screens */
    }
}

@media (max-width: 480px) {
    .future-img {
        height: 40vh; /* Adjust height for very small screens */
    }
}


/* =============================================================================== */

.Apidevelopment {
    background: white url("../images/bg-image/apiback.png") no-repeat center center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 65vh; /* Initial height for larger screens */
}

@media (max-width: 768px) {
    .Apidevelopment {
        height: 50vh; /* Adjust height for tablets and smaller screens */
    }
}

@media (max-width: 480px) {
    .Apidevelopment {
        height: 40vh; /* Further adjust height for very small screens (mobile) */
    }
}

 
 .Apidevelopment .wrapper {
    background-color: rgba(1, 21, 18, 0.5);
    height: 100%;
    width: 100%;
    position: 1px;
 }

 .Apidevelopment_IMG {
    background: white url("../images/bg-image/APIDEVELOPMENT-IMG.png") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 90vh;
    border: 3px solid #eceaf5;
    margin-top: 30px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .future-img {
        height: 50vh; /* Adjust height for smaller screens */
    }
}

@media (max-width: 480px) {
    .future-img {
        height: 40vh; /* Adjust height for very small screens */
    }
}



.wordpressloading .wrapper {
   
    height: 100%;
    width: 100%;
    position: 1px;
 }

 .wordpressloading {
    background: white url("../images/bg-image/10.png") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    border: 3px solid #eceaf5;
    margin-top: 30px;
    border-radius: 10px;
}


.werdpresswebsite .wrapper {
    background-color: rgba(1, 21, 18, 0.5);
    height: 100%;
    width: 100%;
    position: 1px;
 }

 .werdpresswebsite {
    background: white url("../images/bg-image/8.png") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 90vh;
    border: 3px solid #eceaf5;
    margin-top: 30px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .future-img {
        height: 50vh; /* Adjust height for smaller screens */
    }
}

@media (max-width: 480px) {
    .future-img {
        height: 40vh; /* Adjust height for very small screens */
    }
}



/* ======================================================================= */

.why-choose-us {
    background-color: #0f70f7;
}




.HostingWebasite {
    background: white url("../images/bg-image/15.png") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    margin-top: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.HostingWebasite .wrapper {
    height: 100%;
    width: 100%;
    background-color: rgba(1, 21, 18, 0.5); /* Add overlay color for better readability */
    border-radius: 10px;
    padding: 20px; /* Add padding for better spacing */
    display: flex;
    flex-direction: column; /* Allow stacking of content */
    align-items: center;
    justify-content: center;
    text-align: center; /* Center-align text */
}

/* Responsive for tablets */
@media (max-width: 768px) {
    .HostingWebasite {
        height: 80vh; /* Reduce height for tablets */
        margin-top: 20px; /* Adjust margin for smaller devices */
    }

    .HostingWebasite .wrapper {
        padding: 15px; /* Adjust padding for smaller screens */
        border-radius: 8px; /* Adjust radius slightly */
    }
}

/* Responsive for mobile devices */
@media (max-width: 480px) {
    .HostingWebasite {
        height: 70vh; /* Further reduce height for mobile screens */
        margin-top: 10px; /* Adjust margin for mobile */
    }

    .HostingWebasite .wrapper {
        padding: 10px; /* Further adjust padding for small screens */
        background-color: rgba(1, 21, 18, 0.7); /* Slightly darker overlay for better contrast */
        border-radius: 5px; /* Smaller border radius */
    }
}


.HostingWebasiteabout {
    background: white url("../images/bg-image/webhostingEMailcreation.png") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 60vh;
    border: 3px solid #eceaf5;
    margin-top: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.HostingWebasiteabout .wrapper {
    height: 100%;
    width: 100%;
    background-color: rgba(1, 21, 18, 0.5); /* Add overlay color */
    border-radius: 10px;
}

/* Responsive for tablets */
@media (max-width: 768px) {
    .HostingWebasite {
        height: 70vh; /* Reduce height for tablets */
    }

    .HostingWebasiteabout {
        height: 50vh; /* Adjust height for tablets */
    }

    .HostingWebasite .wrapper, 
    .HostingWebasiteabout .wrapper {
        padding: 15px; /* Add padding for smaller screens */
    }
}

/* Responsive for mobile devices */
@media (max-width: 480px) {
    .HostingWebasite {
        height: 50vh; /* Further reduce height for mobile */
    }

    .HostingWebasiteabout {
        height: 40vh; /* Reduce height for mobile screens */
    }

    .HostingWebasite .wrapper,
    .HostingWebasiteabout .wrapper {
        background-color: rgba(1, 21, 18, 0.7); /* Increase contrast for readability */
        padding: 10px;
    }
}


.CAMERA_12 {
    background: white url("../images/bg-image/Career_13.png") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 60vh;
    border: 1px solid #eceaf5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.CAMERA_12 .wrapper {
    background-color: rgba(1, 21, 18, 0.5);
    width: 100%;
    height: 100%;
    position: relative;
}

/* Responsive for tablets */
@media (max-width: 768px) {
    .CAMERA_12 {
        height: 50vh;
        background-position: center top;
    }

    .CAMERA_12 .wrapper {
        padding: 15px;
    }
}

/* Responsive for mobile devices */
@media (max-width: 480px) {
    .CAMERA_12 {
        height: 40vh;
        background-size: auto 100%;
        border: none;
    }

    .CAMERA_12 .wrapper {
        background-color: rgba(1, 21, 18, 0.7); /* Slightly darker for better contrast */
        padding: 10px;
    }
}


 .Cemara_15 {
    background: white url("../images/bg-image/Career_15.png") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 90vh;
    border: 1px solid #eceaf5;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.Cemara_15 .wrapper {
    
    width: 100%;
    height: 100%;
    position: relative;
}

/* Responsive adjustments for tablets */
@media (max-width: 768px) {
    .Cemara_15 {
        height: 70vh;
        background-position: top center;
    }

    .Cemara_15 .wrapper {
        padding: 10px;
    }
}

/* Responsive adjustments for mobile screens */
@media (max-width: 480px) {
    .Cemara_15 {
        height: 60vh;
        background-size: auto 100%;
        border: none;
    }

    .Cemara_15 .wrapper {
        background-color: rgba(6, 109, 94, 0.7); /* Slightly darker for better visibility */
        padding: 15px;
    }
}



.Our_Features {
    background: white url("../images/bg-image/OurFeatures.png") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Our_Features .wrapper {
    background-color: rgba(4, 44, 38, 0.7);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Add some padding for better spacing */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    background-size: cover;
}

/* Responsive adjustments for tablets */
@media (max-width: 768px) {
    .Our_Features {
        height: 100vh; /* Reduce height on tablets */
        background-position: top center;
        background-size: cover;
    }

    .Our_Features .wrapper {
        padding: 15px; /* Adjust padding for smaller screens */
        background-color: rgba(4, 44, 38, 0.8); /* Increase opacity for better text visibility */
        background-size: cover;
  

    }
}


/* Responsive adjustments for mobile screens */
@media (max-width: 480px) {
    .Our_Features {
        height: auto; /* Allow height to adjust automatically based on content */
        padding: 10px;
        background-size: auto 100%; /* Adjust background size */
        background-size: cover;
    }

    .Our_Features .wrapper {
        background-color: rgba(6, 109, 94, 0.9); /* Darker background for better contrast */
        padding: 10px; /* Add padding for smaller screens */
        text-align: center; /* Center-align text for smaller screens */
        background-size: auto 100%; /* Adjust background size */
        background-size: cover;
    }
}




/* ================================= Cantact_us ============================================== */




.Contact_us {
    background: white url("../images/bg-image/contact_us.png") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Contact_us .wrapper {
    background-color: rgba(4, 44, 38, 0.7);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px; /* Add some padding for better spacing */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    background-size: cover;
}

/* Responsive adjustments for tablets */
@media (max-width: 768px) {
    .Our_Features {
        height: 100vh; /* Reduce height on tablets */
        background-position: top center;
        background-size: cover;
    }

    .Our_Features .wrapper {
        padding: 15px; /* Adjust padding for smaller screens */
        background-color: rgba(4, 44, 38, 0.8); /* Increase opacity for better text visibility */
        background-size: cover;
  

    }
}


/* Responsive adjustments for mobile screens */
@media (max-width: 480px) {
    .Our_Features {
        height: auto; /* Allow height to adjust automatically based on content */
        padding: 10px;
        background-size: auto 100%; /* Adjust background size */
        background-size: cover;
    }

    .Our_Features .wrapper {
        background-color: rgba(6, 109, 94, 0.9); /* Darker background for better contrast */
        padding: 10px; /* Add padding for smaller screens */
        text-align: center; /* Center-align text for smaller screens */
        background-size: auto 100%; /* Adjust background size */
        background-size: cover;
    }
}






/* Slider Wrapper */
#rev_slider_2_1_wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #f4f4f4;
}

/* Slider Module */
#rev_slider_2_1 {
    width: 100%;
    height: auto;
}

/* Slide Background Image */
.rev-slidebg {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Text Layers */
[data-type="text"] {
    position: absolute;
    text-transform: uppercase;
}

/* Headline Text */
#slider-1-slide-1-layer-0 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    background-color: #ff382f;
    padding: 6px 20px;
    border-radius: 4px;
}

#slider-1-slide-1-layer-2 {
    font-size: 72px;
    font-weight: 400;
    line-height: 92px;
    color: #05255f;
}

#slider-1-slide-1-layer-3 {
    font-size: 18px;
    color: #676b72;
    line-height: 26px;
}

/* Button Styling */
.rs-layer.cmt-btn {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    background-color: #05255f;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.rs-layer.cmt-btn:hover {
    background-color: #ff382f;
    color: #fff;
}

/* Slide Transitions */
[data-frame_0] {
    animation: slide-in 1.2s ease-out;
}

[data-frame_999] {
    animation: slide-out 1.2s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
    #slider-1-slide-1-layer-2 {
        font-size: 50px;
        line-height: 70px;
    }
    #slider-1-slide-1-layer-3 {
        font-size: 15px;
    }
    .rs-layer.cmt-btn {
        font-size: 14px;
    }
}

/* Keyframes for Animation */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}


/* ==============================================Abouts us ========================================= */




.landing-Aboutus {
    background-color: #f9f9f9; /* Background color for the section */
    height: 80vh; /* Full screen height */
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    width: 90%; /* Default width */
    margin: auto;
    max-width: 1300px; /* Limit the max width for large screens */
}

.spain {
    color: #fefefe; /* Accent color for the "About Us" text */
    font-weight: bold;
}

p.display-1 {
    font-size: 3rem; /* Default font size */
    margin: 0;
    line-height: 1.2;
    color: #333; /* Text color */
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    p.display-1 {
        font-size: 2.5rem; /* Slightly smaller font for tablets */
    }
}

@media (max-width: 768px) {
    .landing-Aboutus {
        height: auto; /* Let the height adjust based on content for smaller screens */
        padding: 40px 20px; /* Add padding for better spacing */
    }

    p.display-1 {
        font-size: 2rem; /* Smaller font for mobile screens */
    }
}

@media (max-width: 576px) {
    .wrapper {
        width: 100%; /* Full-width for small screens */
    }

    p.display-1 {
        font-size: 1.8rem; /* Smaller font for very small screens */
    }
}



/* Base Styles */
.widget-area {
    padding: 20px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    /* background-color: #f9f9f9; */
    margin-bottom: 20px;
    border-radius: 8px;
}

.widget_cta h4 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: #333;
}

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

.widget_contact_wrapper li {
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
}

.widget_contact_wrapper i {
    margin-right: 10px;
    font-size: 1.2rem;
    color: #020b14;
}

/* Map Container */
.mapouter {
    position: relative;
    text-align: right;
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.gmap_canvas {
    overflow: hidden;
    background: none !important;
    width: 100%;
    height: 100%;
}

.gmap_iframe {
    width: 100%;
    height: 250px; /* Adjust default iframe height */
    border: none;
}

/* Responsive Media Queries */
@media (max-width: 992px) {
    .widget_cta h4 {
        font-size: 1.3rem; /* Reduce heading size */
    }

    .widget_contact_wrapper li {
        font-size: 0.95rem; /* Reduce text size */
    }

    .gmap_iframe {
        height: 220px; /* Adjust iframe height for tablets */
    }
}

@media (max-width: 768px) {
    .widget-area {
        padding: 15px;
    }

    .widget_cta h4 {
        font-size: 1.2rem; /* Further reduce heading size */
    }

    .gmap_iframe {
        height: 200px; /* Adjust iframe height for small screens */
    }
}

@media (max-width: 576px) {
    .widget_cta h4 {
        font-size: 1rem; /* Smallest heading size */
        text-align: center;
    }

    .widget_contact_wrapper li {
        font-size: 0.9rem;
        flex-direction: column; /* Stack icon and text vertically */
        align-items: flex-start;
    }

    .widget_contact_wrapper i {
        margin-bottom: 5px;
    }

    .gmap_iframe {
        height: 180px; /* Smallest iframe height */
    }
}



/* 
=================================footer================================= */


/* =========================================================
   FUTURE INFOSYS - SPLIT MODERN FOOTER
========================================================= */

.footer {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #06121f 0%,
            #07101c 50%,
            #030911 100%
        );

    color: #aab6c6;
}


/* =========================================================
   TOP LINE
========================================================= */

.footer::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #00c6ff 0%,
            #2563eb 45%,
            #7c3aed 100%
        );
}


/* =========================================================
   REMOVE TEMPLATE LAYER
========================================================= */

.footer .cmt-row-wrapper-bg-layer {
    display: none !important;
}


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

.footer .second-footer {
    position: relative;

    padding: 80px 0 50px;

    z-index: 2;
}


/* =========================================================
   CONTAINER
========================================================= */

.footer .container {
    max-width: 1280px;
}


/* =========================================================
   COLUMNS
========================================================= */

.footer .widget-area {
    margin-bottom: 35px;
}


/* =========================================================
   COMPANY SECTION
========================================================= */

.footer .widget_text {
    padding-right: 45px;
}


/* LOGO */

.footer .footer-logo img {
    width: 180px;
    height: auto;

    display: block;

    margin-bottom: 28px;

    filter:
        drop-shadow(
            0 10px 25px
            rgba(0, 198, 255, 0.12)
        );

    transition: all .4s ease;
}

.footer .footer-logo img:hover {
    transform: translateY(-5px) scale(1.02);
}


/* COMPANY NAME */

.footer .footer-logo::after {
    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin-bottom: 20px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #00c6ff,
            #7c3aed
        );
}


/* DESCRIPTION */

.footer .textwidget.widget-text {
    max-width: 450px;

    margin: 0;

    color: #8f9daf;

    font-size: 14px;

    line-height: 2;
}

.footer .textwidget.widget-text b {
    color: #ffffff;
}


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

.footer .widget_social_wrapper {
    margin-top: 35px;
}

.footer .widget_social_wrapper h3 {
    margin-bottom: 17px;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.footer .widget_social_wrapper ul {
    display: flex;

    gap: 9px;

    margin: 0;
    padding: 0;
}


.footer .widget_social_wrapper li {
    list-style: none;

    margin: 0;
}


.footer .widget_social_wrapper li a {
    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.12);

    color: #8997aa;

    background: transparent;

    transition: all .35s ease;
}


.footer .widget_social_wrapper li a:hover {
    color: #ffffff;

    border-color: #00c6ff;

    background: #00c6ff;

    transform: translateY(-5px);

    box-shadow:
        0 8px 25px
        rgba(0,198,255,.25);
}


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

.footer .widget_cta {
    padding-left: 30px;

    border-left:
        1px solid
        rgba(255,255,255,.10);
}


/* PHONE */

.footer .widget_cta h4 {
    margin: 0 0 30px;

    color: #ffffff;

    font-size: 25px;

    line-height: 1.55;

    font-weight: 700;
}


/* =========================================================
   CONTACT LIST
========================================================= */

.footer .widget_contact_wrapper {
    margin: 0;
    padding: 0;
}


.footer .widget_contact_wrapper li {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 15px;

    list-style: none;

    margin-bottom: 22px;

    padding: 0 0 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    color: #9ba8b9;

    font-size: 13px;

    line-height: 1.8;
}


.footer .widget_contact_wrapper li:last-child {
    border-bottom: 0;
}


/* ICON */

.footer .widget_contact_wrapper li i {
    width: 42px;
    height: 42px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(0,198,255,.14),
            rgba(124,58,237,.14)
        );

    border:
        1px solid
        rgba(0,198,255,.18);

    color: #00c6ff;

    font-size: 15px;
}


/* LINKS */

.footer .widget_contact_wrapper li a {
    color: #d0d8e3;

    text-decoration: none;

    transition: color .3s ease;
}

.footer .widget_contact_wrapper li a:hover {
    color: #00c6ff;
}


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

.footer .mapouter {
    position: relative;

    width: 100% !important;

    height: 180px !important;

    margin-top: 25px;

    overflow: hidden;

    border-radius: 16px;

    border:
        1px solid
        rgba(255,255,255,.10);
}


.footer .gmap_canvas {
    width: 100% !important;
    height: 100% !important;

    overflow: hidden;
}


.footer .gmap_canvas iframe {
    width: 100% !important;
    height: 100% !important;

    display: block;

    border: 0 !important;
}


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

.footer .newsletter_widget {
    position: relative;

    padding: 0 0 35px;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}


.footer .newsletter_widget .widget-title {
    margin-bottom: 15px;

    color: #ffffff;

    font-size: 22px;

    font-weight: 700;
}


/* GRADIENT LINE */

.footer .newsletter_widget .widget-title::after {
    content: "";

    display: block;

    width: 45px;
    height: 3px;

    margin-top: 12px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #00c6ff,
            #7c3aed
        );
}


.footer .newsletter_widget > p {
    margin-bottom: 20px;

    color: #8997a9;

    font-size: 13px;

    line-height: 1.8;
}


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

.footer .mailchimp-inputbox {
    display: flex;

    gap: 8px;

    margin: 0;
}


.footer .mailchimp-inputbox p {
    margin: 0;
}


.footer .mailchimp-inputbox p:first-child {
    flex: 1;
}


.footer .mailchimp-inputbox input {
    width: 100%;
    height: 50px;

    padding: 0 16px;

    outline: none;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 8px;

    background: #0a1422;

    color: #ffffff;

    font-size: 13px;

    transition: all .3s ease;
}


.footer .mailchimp-inputbox input::placeholder {
    color: #657388;
}


.footer .mailchimp-inputbox input:focus {
    border-color: #00c6ff;

    box-shadow:
        0 0 0 3px
        rgba(0,198,255,.08);
}


/* BUTTON */

.footer .mailchimp-inputbox button {
    width: 50px !important;
    height: 50px !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 8px !important;

    display: flex !important;

    align-items: center;

    justify-content: center;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #00bfff,
            #2563eb,
            #7c3aed
        ) !important;

    transition: all .35s ease;
}


.footer .mailchimp-inputbox button:hover {
    transform: translateX(4px);

    box-shadow:
        0 8px 25px
        rgba(37,99,235,.35);
}


/* =========================================================
   QUICK LINKS + SOLUTIONS
========================================================= */

.footer .widget_nav_menu {
    margin-top: 35px;

    padding: 0;
}


.footer .widget_nav_menu .widget-title {
    position: relative;

    margin-bottom: 22px;

    padding-bottom: 12px;

    color: #ffffff;

    font-size: 17px;

    font-weight: 700;
}


.footer .widget_nav_menu .widget-title::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 35px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #00c6ff,
            #7c3aed
        );
}


/* LIST */

.footer .menu-footer-quick-links {
    padding: 0;
    margin: 0;
}


.footer .menu-footer-quick-links li {
    list-style: none;

    margin-bottom: 12px;
}


.footer .menu-footer-quick-links li a {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #8997a9;

    font-size: 13px;

    text-decoration: none;

    transition: all .3s ease;
}


.footer .menu-footer-quick-links li a::before {
    content: "↗";

    color: #00c6ff;

    font-size: 12px;

    transition: transform .3s ease;
}


.footer .menu-footer-quick-links li a:hover {
    color: #ffffff;

    transform: translateX(5px);
}


.footer .menu-footer-quick-links li a:hover::before {
    transform: translate(2px,-2px);
}


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

.footer .bottom-footer-text {
    position: relative;

    padding: 22px 0;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    background: #030811;
}


.footer .bottom-footer-text .cpy-text {
    color: #59677a;

    font-size: 12px;
}


.footer .bottom-footer-text a {
    color: #00c6ff;

    text-decoration: none;

    transition: color .3s ease;
}


.footer .bottom-footer-text a:hover {
    color: #ffffff;
}


/* =========================================================
   DESKTOP LAYOUT IMPROVEMENT
========================================================= */

@media (min-width: 992px) {

    .footer .col-lg-4:first-child {
        width: 38%;
    }

    .footer .col-lg-4:nth-child(2) {
        width: 31%;
    }

    .footer .col-lg-4:nth-child(3) {
        width: 31%;
    }

}


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

@media (max-width: 991px) {

    .footer .second-footer {
        padding: 60px 0 40px;
    }

    .footer .widget_text {
        padding-right: 0;
    }

    .footer .widget_cta {
        padding-left: 0;

        border-left: 0;

        border-top:
            1px solid
            rgba(255,255,255,.08);

        padding-top: 35px;
    }

}


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

@media (max-width: 767px) {

    .footer .second-footer {
        padding: 45px 0 30px;
    }

    .footer .footer-logo img {
        width: 160px;
    }

    .footer .widget_cta h4 {
        font-size: 21px;
    }

    .footer .mapouter {
        height: 220px !important;
    }

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

}


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

@media (max-width: 480px) {

    .footer .mailchimp-inputbox input {
        height: 46px;
    }

    .footer .mailchimp-inputbox button {
        width: 46px !important;
        height: 46px !important;
    }

    .footer .widget_social_wrapper ul {
        flex-wrap: wrap;
    }

}


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

.modern-testimonial-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(59, 130, 246, 0.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 95% 20%,
            rgba(139, 92, 246, 0.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(34, 211, 238, 0.07),
            transparent 35%
        ),
        #f8fafc;
}


/* =========================================
   BACKGROUND GLOW
========================================= */

.testimonial-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(100px);
}

.testimonial-glow-blue {
    width: 350px;
    height: 350px;
    left: -180px;
    top: 50px;
    background: rgba(59, 130, 246, 0.08);
}

.testimonial-glow-purple {
    width: 400px;
    height: 400px;
    right: -180px;
    top: 25%;
    background: rgba(139, 92, 246, 0.08);
}

.testimonial-glow-cyan {
    width: 300px;
    height: 300px;
    left: 40%;
    bottom: -180px;
    background: rgba(6, 182, 212, 0.08);
}


/* =========================================
   CONTAINER
========================================= */

.testimonial-container {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 25px;
}


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

.testimonial-header {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.testimonial-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    margin-bottom: 22px;

    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: 50px;

    background: rgba(255, 255, 255, 0.75);

    color: #64748b;
    font-size: 13px;
    font-weight: 600;

    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(10px);
}

.badge-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #06b6d4;

    box-shadow: 0 0 0 5px rgba(6, 182, 212, 0.10);
}

.testimonial-header h2 {
    margin: 0;

    color: #0f172a;

    font-size: 52px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1.8px;
}

.testimonial-header h2 span {
    background: linear-gradient(
        90deg,
        #06b6d4,
        #3b82f6,
        #8b5cf6
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.testimonial-header p {
    max-width: 650px;
    margin: 20px auto 0;

    color: #64748b;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   TESTIMONIAL GRID
========================================= */

.testimonial-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 24px;

    margin-top: 60px;
}


/* =========================================
   TESTIMONIAL CARD
========================================= */

.testimonial-card {
    position: relative;

    padding: 32px;

    border: 1px solid rgba(226, 232, 240, 0.9);

    border-radius: 24px;

    background: rgba(255, 255, 255, 0.78);

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.06);

    backdrop-filter: blur(15px);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.testimonial-card:hover {
    transform: translateY(-8px);

    border-color: rgba(59, 130, 246, 0.22);

    box-shadow:
        0 30px 70px rgba(37, 99, 235, 0.12);
}


/* =========================================
   CARD TOP
========================================= */

.testimonial-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.quote-icon {
    display: flex;

    width: 44px;
    height: 44px;

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

    border-radius: 14px;

    background: rgba(59, 130, 246, 0.08);

    color: #3b82f6;

    font-size: 17px;
}

.purple-icon {
    background: rgba(139, 92, 246, 0.08);
    color: #8b5cf6;
}

.cyan-icon {
    background: rgba(6, 182, 212, 0.08);
    color: #06b6d4;
}

.testimonial-rating {
    color: #f59e0b;

    font-size: 14px;

    letter-spacing: 2px;
}


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

.testimonial-text {
    min-height: 145px;

    margin: 28px 0 0;

    color: #475569;

    font-size: 16px;

    line-height: 1.9;
}


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

.testimonial-user {
    display: flex;

    align-items: center;

    gap: 13px;

    padding-top: 22px;

    border-top: 1px solid #f1f5f9;
}

.user-avatar {
    display: flex;

    flex-shrink: 0;

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    color: #fff;

    font-size: 14px;

    font-weight: 700;
}

.avatar-blue {
    background: linear-gradient(
        135deg,
        #3b82f6,
        #06b6d4
    );
}

.avatar-purple {
    background: linear-gradient(
        135deg,
        #8b5cf6,
        #ec4899
    );
}

.avatar-cyan {
    background: linear-gradient(
        135deg,
        #06b6d4,
        #3b82f6
    );
}

.user-info {
    min-width: 0;
}

.user-info h3 {
    margin: 0;

    color: #0f172a;

    font-size: 15px;

    font-weight: 700;
}

.user-info span {
    display: block;

    margin-top: 4px;

    color: #94a3b8;

    font-size: 12px;
}

.verified {
    display: flex;

    align-items: center;

    gap: 4px;

    margin-left: auto;

    color: #10b981;

    font-size: 11px;

    font-weight: 600;
}


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

.testimonial-cta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 28px;

    padding: 36px 40px;

    border: 1px solid rgba(59, 130, 246, 0.12);

    border-radius: 25px;

    background:
        linear-gradient(
            100deg,
            rgba(239, 246, 255, 0.95),
            rgba(248, 250, 252, 0.90),
            rgba(245, 243, 255, 0.95)
        );

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.05);
}

.cta-label {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #0891b2;

    font-size: 13px;

    font-weight: 700;
}

.cta-label span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #06b6d4;
}

.cta-content h3 {
    margin: 10px 0 0;

    color: #0f172a;

    font-size: 27px;

    font-weight: 800;
}

.cta-content h3 strong {
    color: #2563eb;
}

.cta-content p {
    max-width: 650px;

    margin: 8px 0 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;
}


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

.cta-button {
    display: inline-flex;

    flex-shrink: 0;

    align-items: center;

    gap: 12px;

    padding: 14px 23px;

    border-radius: 13px;

    background: #0f172a;

    color: #fff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    box-shadow:
        0 12px 25px rgba(15, 23, 42, 0.15);

    transition: all 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-2px);

    background: #2563eb;

    color: #fff;

    box-shadow:
        0 15px 30px rgba(37, 99, 235, 0.20);
}

.cta-button i {
    transition: transform 0.3s ease;
}

.cta-button:hover i {
    transform: translateX(4px);
}


/* =========================================
   STATS
========================================= */

.testimonial-stats {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;

    margin-top: 20px;
}

.stat-box {
    padding: 23px 15px;

    border: 1px solid rgba(226, 232, 240, 0.8);

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.65);

    text-align: center;

    backdrop-filter: blur(10px);

    transition: all 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-4px);

    background: rgba(255, 255, 255, 0.9);

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.06);
}

.stat-box strong {
    display: block;

    color: #0f172a;

    font-size: 25px;

    font-weight: 800;
}

.stat-box span {
    display: block;

    margin-top: 5px;

    color: #94a3b8;

    font-size: 11px;

    font-weight: 500;
}


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

@media (max-width: 991px) {

    .modern-testimonial-section {
        padding: 80px 0;
    }

    .testimonial-header h2 {
        font-size: 43px;
    }

    .testimonial-grid {
        grid-template-columns: 1fr 1fr;
    }

    .testimonial-card:last-child {
        grid-column: 1 / -1;
    }

    .testimonial-text {
        min-height: auto;
    }

    .testimonial-cta {
        align-items: flex-start;
        flex-direction: column;
    }

}


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

@media (max-width: 767px) {

    .modern-testimonial-section {
        padding: 65px 0;
    }

    .testimonial-container {
        padding: 0 18px;
    }

    .testimonial-header h2 {
        font-size: 35px;
        letter-spacing: -1px;
    }

    .testimonial-header p {
        font-size: 14px;
        line-height: 1.7;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;

        gap: 16px;

        margin-top: 40px;
    }

    .testimonial-card:last-child {
        grid-column: auto;
    }

    .testimonial-card {
        padding: 25px;
    }

    .testimonial-text {
        font-size: 15px;
        line-height: 1.8;
    }

    .testimonial-cta {
        padding: 28px 24px;
    }

    .cta-content h3 {
        font-size: 23px;
        line-height: 1.35;
    }

    .cta-button {
        width: 100%;

        justify-content: center;
    }

    .testimonial-stats {
        grid-template-columns: 1fr 1fr;
    }

}


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

@media (max-width: 480px) {

    .testimonial-header h2 {
        font-size: 30px;
    }

    .testimonial-badge {
        font-size: 11px;
    }

    .testimonial-user {
        align-items: flex-start;
    }

    .verified {
        font-size: 10px;
    }

    .stat-box strong {
        font-size: 21px;
    }

}


/* =========================================================
   FUTURE INFOSYS
   MODERN WORLD MAP STYLE FOOTER
   NO IMAGE REQUIRED
========================================================= */


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

.fi-footer {

    position: relative;

    overflow: hidden;

    padding-top: 75px;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f4f8fd 100%
        );

    color: #243b5a;

}


/* =========================================================
   TOP LIGHT LINE
========================================================= */

.fi-footer::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #1d8cff,
            #56b4ff,
            #7b8cff,
            #1d8cff
        );

}


/* =========================================================
   WORLD MAP / DOT PATTERN
========================================================= */

.fi-footer-dots {

    position: absolute;

    top: 60px;
    left: 18%;

    width: 70%;
    height: 470px;

    opacity: .42;

    pointer-events: none;

    background-image:

        radial-gradient(
            circle,
            rgba(48, 130, 220, .20) 1.3px,
            transparent 1.5px
        );

    background-size: 8px 8px;

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0,0,0,.8) 42%,
            transparent 75%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0,0,0,.8) 42%,
            transparent 75%
        );

}


/* =========================================================
   EXTRA MAP SHAPES
========================================================= */

.fi-footer-dots::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 130px;

    left: 5%;
    top: 85px;

    border-radius:
        55% 45% 60% 40%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, .12) 1.4px,
            transparent 1.7px
        );

    background-size: 8px 8px;

    transform: rotate(-10deg);

}


.fi-footer-dots::after {

    content: "";

    position: absolute;

    width: 280px;
    height: 180px;

    right: 5%;
    top: 80px;

    border-radius:
        45% 55% 40% 60%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, .12) 1.4px,
            transparent 1.7px
        );

    background-size: 8px 8px;

    transform: rotate(10deg);

}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.fi-footer-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

}


.fi-glow-1 {

    width: 350px;
    height: 350px;

    top: -180px;
    left: -120px;

    background:
        rgba(59, 130, 246, .09);

}


.fi-glow-2 {

    width: 400px;
    height: 400px;

    right: -180px;
    bottom: -180px;

    background:
        rgba(96, 165, 250, .09);

}


/* =========================================================
   CONTAINER
========================================================= */

.fi-footer-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1250px;

    margin: auto;

    padding:
        0 25px 65px;

    display: grid;

    grid-template-columns:
        1.25fr
        1.05fr
        .9fr
        .9fr;

    gap: 55px;

}


/* =========================================================
   COMPANY
========================================================= */

.fi-company {

    position: relative;

}


.fi-logo {

    display: flex;

    width: 175px;
    height: 65px;

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

    padding: 8px;

    margin-bottom: 22px;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(30, 64, 175, .10);

}


.fi-logo img {

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

}


.fi-company h3 {

    margin: 0 0 15px;

    color: #123b70;

    font-size: 21px;

    line-height: 1.35;

    font-weight: 800;

}


.fi-company p {

    max-width: 370px;

    margin: 0 0 12px;

    color: #647a96;

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================================
   TAGLINE
========================================================= */

.fi-tagline {

    display: flex;

    gap: 12px;

    margin-top: 20px;

}


.fi-tagline > span {

    width: 3px;

    min-height: 48px;

    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            #1d8cff,
            #60a5fa
        );

}


.fi-tagline em {

    display: block;

    color: #71839c;

    font-size: 13px;

}


.fi-tagline strong {

    display: block;

    margin-top: 3px;

    color: #1673d1;

    font-size: 14px;

}


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

.fi-social {

    display: flex;

    gap: 10px;

    margin-top: 25px;

}


.fi-social a {

    display: flex;

    width: 42px;
    height: 42px;

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

    border: 1px solid #dce7f4;

    border-radius: 50%;

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

    color: #315579;

    text-decoration: none;

    font-size: 14px;

    box-shadow:
        0 6px 18px rgba(30,64,175,.06);

    transition:
        all .3s ease;

}


.fi-social a:hover {

    transform:
        translateY(-5px);

    border-color:
        #3b82f6;

    background:
        #2563eb;

    color:
        #ffffff;

    box-shadow:
        0 12px 25px
        rgba(37,99,235,.20);

}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.fi-heading {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;

    color: #2379d5;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.fi-heading-dot {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #1d9bf0;

    box-shadow:
        0 0 0 5px
        rgba(29,155,240,.08);

}


.fi-contact h3,
.fi-links h3 {

    margin: 0 0 23px;

    color: #123b70;

    font-size: 25px;

    font-weight: 800;

    letter-spacing: -.4px;

}


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

.fi-contact-row {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 20px;

}


.fi-contact-icon {

    display: flex;

    flex-shrink: 0;

    width: 40px;
    height: 40px;

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

    border-radius: 50%;

    background:
        #ffffff;

    color: #2379ed;

    font-size: 13px;

    box-shadow:
        0 8px 22px
        rgba(37,99,235,.10);

}


.fi-contact-content label {

    display: block;

    margin-bottom: 4px;

    color: #4383bd;

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .5px;

}


.fi-contact-content p {

    max-width: 260px;

    margin: 0;

    color: #637993;

    font-size: 12px;

    line-height: 1.65;

}


.fi-contact-content a {

    display: block;

    color: #4c627d;

    font-size: 12px;

    line-height: 1.7;

    text-decoration: none;

    transition:
        color .25s ease;

}


.fi-contact-content a:hover {

    color: #1673d1;

}


.fi-support {

    color:
        #0d9b68 !important;

    font-weight: 600;

}


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

.fi-links ul {

    margin: 0;

    padding: 0;

    list-style: none;

}


.fi-links li {

    margin-bottom: 12px;

}


.fi-links a {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #5d718b;

    font-size: 12px;

    line-height: 1.5;

    text-decoration: none;

    transition:
        all .25s ease;

}


.fi-links a span {

    display: inline-flex;

    color: #2d83e6;

    font-size: 17px;

    line-height: 1;

    transition:
        transform .25s ease;

}


.fi-links a:hover {

    color: #1673d1;

    transform:
        translateX(4px);

}


.fi-links a:hover span {

    transform:
        translateX(3px);

}


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

.fi-footer-bottom {

    position: relative;

    z-index: 10;

    border-top:
        1px solid #dce8f5;

    background:
        rgba(248,251,255,.90);

}


.fi-bottom-container {

    width: 100%;

    max-width: 1250px;

    min-height: 65px;

    margin: auto;

    padding:
        0 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.fi-bottom-container p {

    margin: 0;

    color: #8293a8;

    font-size: 11px;

}


.fi-bottom-container a {

    color: #245a96;

    font-weight: 700;

    text-decoration: none;

}


.fi-bottom-container a:hover {

    color: #1673d1;

}


.fi-bottom-center {

    color: #8ca0b8;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;

}


.fi-bottom-center span {

    margin: 0 8px;

    color: #5ca1e8;

}


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

@media (max-width: 1100px) {

    .fi-footer-container {

        grid-template-columns:
            1fr 1fr;

        gap: 45px;

    }

}


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

@media (max-width: 700px) {

    .fi-footer {

        padding-top: 55px;

    }

    .fi-footer-container {

        grid-template-columns: 1fr;

        gap: 38px;

        padding:
            0 20px 45px;

    }

    .fi-company p {

        max-width: none;

    }

    .fi-footer-dots {

        left: 0;

        width: 100%;

        opacity: .25;

    }

    .fi-bottom-container {

        min-height: auto;

        padding:
            20px;

        flex-direction: column;

        text-align: center;

        gap: 8px;

    }

}


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

@media (max-width: 450px) {

    .fi-footer-container {

        padding-left: 16px;
        padding-right: 16px;

    }

    .fi-logo {

        width: 160px;
        height: 60px;

    }

    .fi-company h3 {

        font-size: 19px;

    }

    .fi-contact h3,
    .fi-links h3 {

        font-size: 23px;

    }

    .fi-social a {

        width: 39px;
        height: 39px;

    }

}




/* =========================================================
   FUTURE INFOSYS
   MODERN SERVICES SECTION
   COMPLETE CSS
========================================================= */


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

.fi-services-section {
    position: relative;
    overflow: hidden;

    padding: 90px 0;

    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(59, 130, 246, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(124, 92, 230, 0.07),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.fi-services-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);
}

.fi-services-glow-1 {
    width: 420px;
    height: 420px;

    left: -220px;
    top: -180px;

    background:
        rgba(59, 130, 246, 0.10);
}

.fi-services-glow-2 {
    width: 450px;
    height: 450px;

    right: -230px;
    bottom: -200px;

    background:
        rgba(139, 92, 246, 0.08);
}


/* =========================================================
   CONTAINER
========================================================= */

.fi-services-container {
    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;

    padding: 0 25px;
}


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

.fi-services-header {
    max-width: 720px;

    margin: 0 auto 55px;

    text-align: center;
}


/* Small Label */

.fi-section-label {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 14px;

    color: #2379d5;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}

.fi-section-label span {
    position: relative;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #2196e8;

    box-shadow:
        0 0 0 5px rgba(33, 150, 232, 0.09);
}


/* Main Heading */

.fi-services-header h2 {
    margin: 0;

    color: #102f58;

    font-size: 48px;

    line-height: 1.12;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.fi-services-header h2 span {
    background:
        linear-gradient(
            90deg,
            #1675d1,
            #3b82f6,
            #7657d8
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* Header Description */

.fi-services-header p {
    max-width: 610px;

    margin: 17px auto 0;

    color: #71839a;

    font-size: 14px;

    line-height: 1.85;
}


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

.fi-services-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 25px;
}


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

.fi-service-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border:
        1px solid #e1eaf5;

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 15px 45px
        rgba(24, 61, 105, 0.07);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}


/* Card Hover */

.fi-service-card:hover {
    transform:
        translateY(-8px);

    border-color:
        #c9ddf5;

    box-shadow:
        0 30px 70px
        rgba(37, 99, 235, 0.13);
}


/* =========================================================
   CARD TOP GRADIENT LINE
========================================================= */

.fi-service-card::before {
    content: "";

    position: absolute;

    z-index: 20;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            #22b8ee,
            #3b82f6,
            #7357db
        );

    transition:
        opacity 0.3s ease;
}

.fi-service-card:hover::before {
    opacity: 1;
}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.fi-service-image {
    position: relative;

    width: 100% !important;

    height: 250px !important;

    min-height: 250px !important;

    max-height: 250px !important;

    overflow: hidden !important;

    padding: 0 !important;

    margin: 0 !important;

    background:
        #eaf2fb !important;
}


/* =========================================================
   IMAGE
   IMPORTANT - OVERRIDE OLD THEME
========================================================= */

.fi-service-image img,
.fi-service-image img.img-fluid,
.fi-service-image img.auto_size,
.fi-service-image .img-fluid,
.fi-service-image .auto_size {

    display: block !important;

    position: relative !important;

    width: 100% !important;

    max-width: none !important;

    min-width: 100% !important;

    height: 100% !important;

    max-height: none !important;

    min-height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    outline: 0 !important;

    object-fit: cover !important;

    object-position: center center !important;

    vertical-align: middle !important;

    opacity: 1 !important;

    transform: scale(1);

    transition:
        transform 0.7s
        cubic-bezier(.2,.8,.2,1) !important;
}


/* =========================================================
   REMOVE HTML WIDTH / HEIGHT EFFECT
========================================================= */

.fi-service-image img[width],
.fi-service-image img[height] {

    width: 100% !important;

    height: 100% !important;
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.fi-service-card:hover
.fi-service-image img {

    transform:
        scale(1.07) !important;
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.fi-image-overlay {

    position: absolute !important;

    z-index: 3;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(5, 30, 65, 0.00) 35%,
            rgba(5, 30, 65, 0.10) 65%,
            rgba(5, 30, 65, 0.40) 100%
        );
}


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

.fi-service-number {

    position: absolute !important;

    z-index: 10 !important;

    top: 17px !important;

    left: 17px !important;

    display: flex !important;

    width: 48px !important;

    height: 48px !important;

    align-items: center !important;

    justify-content: center !important;

    border:
        1px solid rgba(255,255,255,.75) !important;

    border-radius: 14px !important;

    background:
        rgba(255,255,255,.93) !important;

    color: #1769b5 !important;

    font-size: 13px !important;

    font-weight: 800 !important;

    box-shadow:
        0 10px 25px
        rgba(15,60,110,.16) !important;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* Badge Hover */

.fi-service-card:hover
.fi-service-number {

    transform:
        translateY(-2px)
        rotate(-2deg);

    box-shadow:
        0 14px 30px
        rgba(15,60,110,.22) !important;
}


/* =========================================================
   CONTENT
========================================================= */

.fi-service-content {

    position: relative;

    z-index: 5;

    padding:
        25px 27px 27px;

    background:
        #ffffff;
}


/* =========================================================
   META
========================================================= */

.fi-service-meta {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 9px;

    color: #1683d7;

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}

.fi-service-meta span {

    width: 6px;

    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #1da5e8;

    box-shadow:
        0 0 0 4px
        rgba(29,165,232,.08);
}


/* Purple */

.fi-service-meta.purple {
    color: #7657d8;
}

.fi-service-meta.purple span {

    background: #8b5cf6;

    box-shadow:
        0 0 0 4px
        rgba(139,92,246,.08);
}


/* Green */

.fi-service-meta.green {
    color: #15956a;
}

.fi-service-meta.green span {

    background: #10b981;

    box-shadow:
        0 0 0 4px
        rgba(16,185,129,.08);
}


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

.fi-service-content h3 {

    margin: 0;

    font-size: 21px;

    line-height: 1.35;

    font-weight: 800;

    letter-spacing: -.4px;
}

.fi-service-content h3 a {

    color: #132f55;

    text-decoration: none;

    transition:
        color .25s ease;
}

.fi-service-card:hover
.fi-service-content h3 a {

    color: #176ed0;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.fi-service-content p {

    min-height: 64px;

    margin:
        10px 0 20px;

    color: #71839a;

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   DISCOVER LINK
========================================================= */

.fi-service-link {

    display: inline-flex;

    width: fit-content;

    align-items: center;

    gap: 10px;

    color: #1675d1;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition:
        color .25s ease;
}

.fi-service-link:hover {

    color: #095aa9;
}


/* =========================================================
   ARROW
========================================================= */

.fi-arrow {

    display: flex;

    width: 31px;

    height: 31px;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #edf6ff;

    color: #1675d1;

    font-size: 16px;

    line-height: 1;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}

.fi-service-link:hover
.fi-arrow {

    transform:
        translateX(5px);

    background:
        #1675d1;

    color:
        #ffffff;

    box-shadow:
        0 7px 18px
        rgba(22,117,209,.20);
}


/* =========================================================
   PURPLE LINK
========================================================= */

.purple-link {

    color: #7657d8;
}

.purple-link .fi-arrow {

    background:
        #f1edff;

    color:
        #7657d8;
}

.purple-link:hover {

    color:
        #6044bd;
}

.purple-link:hover
.fi-arrow {

    background:
        #7657d8;

    color:
        #ffffff;

    box-shadow:
        0 7px 18px
        rgba(118,87,216,.20);
}


/* =========================================================
   GREEN LINK
========================================================= */

.green-link {

    color:
        #15956a;
}

.green-link .fi-arrow {

    background:
        #eafaf4;

    color:
        #15956a;
}

.green-link:hover {

    color:
        #087c56;
}

.green-link:hover
.fi-arrow {

    background:
        #15956a;

    color:
        #ffffff;

    box-shadow:
        0 7px 18px
        rgba(21,149,106,.20);
}


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

@media (max-width: 1100px) {

    .fi-services-container {

        padding:
            0 20px;
    }

    .fi-services-grid {

        gap: 18px;
    }

    .fi-service-content {

        padding:
            23px;
    }

}


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

@media (max-width: 991px) {

    .fi-services-section {

        padding:
            75px 0;
    }

    .fi-services-header {

        margin-bottom:
            45px;
    }

    .fi-services-header h2 {

        font-size:
            42px;
    }

    .fi-services-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            20px;
    }

    .fi-service-card:last-child {

        grid-column:
            1 / -1;

        width:
            calc(50% - 10px);

        margin:
            0 auto;
    }

}


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

@media (max-width: 767px) {

    .fi-services-section {

        padding:
            60px 0;
    }

    .fi-services-container {

        padding:
            0 17px;
    }

    .fi-services-header {

        margin-bottom:
            35px;
    }

    .fi-services-header h2 {

        font-size:
            34px;

        letter-spacing:
            -.8px;
    }

    .fi-services-header p {

        margin-top:
            14px;

        font-size:
            13px;

        line-height:
            1.75;
    }

    .fi-services-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;
    }

    .fi-service-card:last-child {

        grid-column:
            auto;

        width:
            100%;

        margin:
            0;
    }

    .fi-service-image {

        height:
            235px !important;

        min-height:
            235px !important;

        max-height:
            235px !important;
    }

    .fi-service-content {

        padding:
            23px 22px 25px;
    }

    .fi-service-content h3 {

        font-size:
            20px;
    }

    .fi-service-content p {

        min-height:
            auto;
    }

}


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

@media (max-width: 480px) {

    .fi-services-section {

        padding:
            50px 0;
    }

    .fi-services-container {

        padding:
            0 14px;
    }

    .fi-services-header h2 {

        font-size:
            30px;
    }

    .fi-section-label {

        font-size:
            9px;
    }

    .fi-service-image {

        height:
            220px !important;

        min-height:
            220px !important;

        max-height:
            220px !important;
    }

    .fi-service-number {

        top:
            14px !important;

        left:
            14px !important;

        width:
            43px !important;

        height:
            43px !important;

        border-radius:
            13px !important;
    }

    .fi-service-content {

        padding:
            21px 20px 23px;
    }

    .fi-service-content h3 {

        font-size:
            19px;
    }

}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 360px) {

    .fi-services-container {

        padding:
            0 12px;
    }

    .fi-service-image {

        height:
            205px !important;

        min-height:
            205px !important;

        max-height:
            205px !important;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .fi-service-card,
    .fi-service-image img,
    .fi-service-number,
    .fi-service-link,
    .fi-arrow {

        transition:
            none !important;
    }

}


/* =========================================================
   FUTURE INFOSYS
   MODERN INDUSTRIES + STATISTICS SECTION
========================================================= */


/* =========================================================
   MAIN SECTION
========================================================= */

.fi-industry-section {

    position: relative;

    overflow: hidden;

    padding: 100px 0;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(37, 99, 235, .22),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(124, 58, 237, .18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #06172f 0%,
            #092b59 48%,
            #071f45 100%
        );

}


/* =========================================================
   TOP ACCENT
========================================================= */

.fi-industry-section::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #22d3ee,
            #3b82f6,
            #818cf8,
            transparent
        );

}


/* =========================================================
   GRID BACKGROUND
========================================================= */

.fi-industry-grid-bg {

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .20;

    background-image:
        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0,0,0,.8) 45%,
            transparent 80%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            #000 0%,
            rgba(0,0,0,.8) 45%,
            transparent 80%
        );

}


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

.fi-industry-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(110px);

}


.fi-industry-glow-1 {

    width: 400px;
    height: 400px;

    left: -230px;
    top: -180px;

    background:
        rgba(37, 99, 235, .20);

}


.fi-industry-glow-2 {

    width: 450px;
    height: 450px;

    right: -260px;
    bottom: -220px;

    background:
        rgba(99, 102, 241, .18);

}


/* =========================================================
   CONTAINER
========================================================= */

.fi-industry-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;

    padding:
        0 25px;

}


/* =========================================================
   LAYOUT
========================================================= */

.fi-industry-layout {

    display: grid;

    grid-template-columns:
        .95fr
        1.05fr;

    gap: 75px;

    align-items: center;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.fi-industry-content {

    max-width: 570px;

}


/* =========================================================
   LABEL
========================================================= */

.fi-industry-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #67e8f9;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;

}


.fi-industry-label span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22d3ee;

    box-shadow:
        0 0 0 5px
        rgba(34,211,238,.10);

}


/* =========================================================
   HEADING
========================================================= */

.fi-industry-content h2 {

    margin: 0;

    max-width: 560px;

    color: #ffffff;

    font-size: 48px;

    line-height: 1.13;

    font-weight: 800;

    letter-spacing: -1.5px;

}


.fi-industry-content h2 strong {

    display: inline;

    background:
        linear-gradient(
            90deg,
            #38bdf8,
            #60a5fa,
            #a78bfa
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}


/* =========================================================
   INTRO
========================================================= */

.fi-industry-intro {

    max-width: 530px;

    margin:
        20px 0 30px;

    color:
        rgba(203,213,225,.72);

    font-size: 13px;

    line-height: 1.85;

}


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

.fi-industry-feature {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 18px;

    padding:
        15px 17px;

    border:
        1px solid rgba(255,255,255,.09);

    border-radius: 15px;

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

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;

}


.fi-industry-feature:hover {

    transform:
        translateX(5px);

    border-color:
        rgba(103,232,249,.22);

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

}


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

.fi-feature-icon {

    display: flex;

    flex-shrink: 0;

    width: 40px;
    height: 40px;

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

    border-radius: 11px;

    background:
        rgba(34,211,238,.10);

    color:
        #67e8f9;

    font-size: 13px;

}


.fi-feature-icon.blue {

    background:
        rgba(59,130,246,.12);

    color:
        #60a5fa;

}


.fi-feature-icon.purple {

    background:
        rgba(139,92,246,.12);

    color:
        #a78bfa;

}


/* =========================================================
   FEATURE TEXT
========================================================= */

.fi-feature-text h4 {

    margin:
        0 0 4px;

    color:
        #ffffff;

    font-size: 13px;

    font-weight: 700;

}


.fi-feature-text p {

    margin: 0;

    color:
        rgba(203,213,225,.58);

    font-size: 11px;

    line-height: 1.65;

}


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

.fi-industry-btn {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 13px;

    padding:
        12px 14px 12px 18px;

    border:
        1px solid rgba(103,232,249,.25);

    border-radius: 12px;

    background:
        rgba(34,211,238,.08);

    color:
        #ffffff;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    transition:
        all .3s ease;

}


.fi-industry-btn span {

    display: flex;

    width: 27px;
    height: 27px;

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

    border-radius: 50%;

    background:
        #22b8ee;

    color:
        #ffffff;

    font-size: 15px;

    transition:
        transform .3s ease;

}


.fi-industry-btn:hover {

    border-color:
        rgba(103,232,249,.45);

    background:
        rgba(34,211,238,.14);

    color:
        #ffffff;

    transform:
        translateY(-2px);

}


.fi-industry-btn:hover span {

    transform:
        translateX(4px);

}


/* =========================================================
   STATISTICS GRID
========================================================= */

.fi-industry-stats {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

}


/* =========================================================
   STAT CARD
========================================================= */

.fi-stat-card {

    position: relative;

    overflow: hidden;

    min-height: 250px;

    padding:
        23px;

    border:
        1px solid rgba(255,255,255,.11);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.035)
        );

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.14);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}


/* Card hover */

.fi-stat-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(255,255,255,.23);

    box-shadow:
        0 30px 65px
        rgba(0,0,0,.20);

}


/* =========================================================
   CARD LIGHT
========================================================= */

.fi-stat-card::before {

    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -80px;
    right: -70px;

    border-radius: 50%;

    background:
        rgba(59,130,246,.13);

    filter:
        blur(5px);

    pointer-events: none;

}


/* =========================================================
   CARD BOTTOM LINE
========================================================= */

.fi-stat-card::after {

    content: "";

    position: absolute;

    left: 23px;
    right: 23px;

    bottom: 0;

    height: 2px;

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            #22d3ee,
            transparent
        );

    opacity: .65;

}


/* =========================================================
   CARD TOP
========================================================= */

.fi-stat-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 25px;

}


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

.fi-stat-icon {

    display: flex;

    width: 45px;
    height: 45px;

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

    border:
        1px solid rgba(103,232,249,.14);

    border-radius: 13px;

    background:
        rgba(34,211,238,.09);

    color:
        #67e8f9;

    font-size: 14px;

}


/* Purple */

.fi-stat-purple .fi-stat-icon {

    border-color:
        rgba(167,139,250,.15);

    background:
        rgba(139,92,246,.10);

    color:
        #c4b5fd;

}


/* Cyan */

.fi-stat-cyan .fi-stat-icon {

    border-color:
        rgba(56,189,248,.15);

    background:
        rgba(14,165,233,.10);

    color:
        #7dd3fc;

}


/* Green */

.fi-stat-green .fi-stat-icon {

    border-color:
        rgba(52,211,153,.15);

    background:
        rgba(16,185,129,.10);

    color:
        #6ee7b7;

}


/* =========================================================
   NUMBER
========================================================= */

.fi-stat-number {

    color:
        rgba(148,163,184,.45);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

}


/* =========================================================
   STAT VALUE
========================================================= */

.fi-stat-value {

    color:
        #ffffff;

    font-size: 42px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1.5px;

}


.fi-stat-value small {

    color:
        #38bdf8;

    font-size: 22px;

    vertical-align:
        top;

}


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

.fi-stat-card h3 {

    margin:
        11px 0 8px;

    color:
        #ffffff;

    font-size: 15px;

    line-height: 1.35;

    font-weight: 700;

}


/* =========================================================
   STAT DESCRIPTION
========================================================= */

.fi-stat-card p {

    margin: 0;

    color:
        rgba(203,213,225,.56);

    font-size: 11px;

    line-height: 1.7;

}


/* =========================================================
   COLORED BOTTOM LINES
========================================================= */

.fi-stat-purple::after {

    background:
        linear-gradient(
            90deg,
            #a78bfa,
            transparent
        );

}


.fi-stat-cyan::after {

    background:
        linear-gradient(
            90deg,
            #38bdf8,
            transparent
        );

}


.fi-stat-green::after {

    background:
        linear-gradient(
            90deg,
            #34d399,
            transparent
        );

}


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

@media (max-width: 1100px) {

    .fi-industry-layout {

        gap:
            45px;

    }

    .fi-industry-content h2 {

        font-size:
            42px;

    }

}


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

@media (max-width: 991px) {

    .fi-industry-section {

        padding:
            75px 0;

    }

    .fi-industry-layout {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }

    .fi-industry-content {

        max-width:
            700px;

    }

    .fi-industry-intro {

        max-width:
            650px;

    }

}


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

@media (max-width: 650px) {

    .fi-industry-section {

        padding:
            60px 0;

    }

    .fi-industry-container {

        padding:
            0 17px;

    }

    .fi-industry-content h2 {

        font-size:
            34px;

        letter-spacing:
            -.8px;

    }

    .fi-industry-intro {

        font-size:
            13px;

    }

    .fi-industry-stats {

        grid-template-columns:
            1fr;

        gap:
            15px;

    }

    .fi-stat-card {

        min-height:
            220px;

    }

}


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

@media (max-width: 430px) {

    .fi-industry-content h2 {

        font-size:
            30px;

    }

    .fi-industry-feature {

        padding:
            13px;

    }

    .fi-feature-icon {

        width:
            37px;

        height:
            37px;

    }

    .fi-stat-card {

        min-height:
            205px;

        padding:
            20px;

    }

    .fi-stat-value {

        font-size:
            38px;

    }

}


/* =========================================================
   INDUSTRY SECTION - FOOTER STYLE BACKGROUND
========================================================= */

.fi-industry-section {
    position: relative;
    overflow: hidden;

    padding: 90px 0;

    color: #243b5a;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f3f7fc 100%
        );
}


/* =========================================================
   SUBTLE TOP LINE
========================================================= */

.fi-industry-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #55b5f5,
            #3b82f6,
            #8b7cf6,
            transparent
        );

    opacity: .55;
}


/* =========================================================
   DOT / WORLD-MAP STYLE BACKGROUND
   NO IMAGE
========================================================= */

.fi-industry-grid-bg {

    position: absolute;

    z-index: 0;

    top: 0;
    left: 8%;

    width: 84%;
    height: 100%;

    pointer-events: none;

    opacity: .55;

    background-image:
        radial-gradient(
            circle,
            rgba(46, 126, 205, .18) 1.2px,
            transparent 1.5px
        );

    background-size:
        8px 8px;

    mask-image:
        radial-gradient(
            ellipse 65% 65% at 50% 50%,
            #000 0%,
            rgba(0,0,0,.8) 42%,
            transparent 75%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse 65% 65% at 50% 50%,
            #000 0%,
            rgba(0,0,0,.8) 42%,
            transparent 75%
        );
}


/* =========================================================
   MAP-LIKE DOT AREAS
========================================================= */

.fi-industry-grid-bg::before {

    content: "";

    position: absolute;

    left: 8%;
    top: 18%;

    width: 300px;
    height: 190px;

    border-radius:
        60% 40% 55% 45%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, .15) 1.3px,
            transparent 1.6px
        );

    background-size:
        8px 8px;

    transform:
        rotate(-12deg);

    opacity: .65;
}


.fi-industry-grid-bg::after {

    content: "";

    position: absolute;

    right: 7%;
    top: 20%;

    width: 330px;
    height: 220px;

    border-radius:
        45% 55% 40% 60%;

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, .13) 1.3px,
            transparent 1.6px
        );

    background-size:
        8px 8px;

    transform:
        rotate(10deg);

    opacity: .60;
}


/* =========================================================
   SOFT BLUE GLOW
========================================================= */

.fi-industry-glow {

    position: absolute;

    z-index: 0;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);
}


.fi-industry-glow-1 {

    width: 400px;
    height: 400px;

    top: -220px;
    left: -180px;

    background:
        rgba(59, 130, 246, .07);
}


.fi-industry-glow-2 {

    width: 450px;
    height: 450px;

    right: -220px;
    bottom: -220px;

    background:
        rgba(96, 165, 250, .07);
}


/* =========================================================
   CONTENT ABOVE BACKGROUND
========================================================= */

.fi-industry-container {
    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;

    padding: 0 25px;
}


/* =========================================================
   LEFT HEADING - LIGHT VERSION
========================================================= */

.fi-industry-content h2 {

    color: #123b70;
}


.fi-industry-content h2 strong {

    background:
        linear-gradient(
            90deg,
            #1675d1,
            #3b82f6,
            #7657d8
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.fi-industry-intro {

    color: #647a96;
}


/* =========================================================
   INDUSTRY FEATURES - WHITE GLASS
========================================================= */

.fi-industry-feature {

    border:
        1px solid #e1eaf4;

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

    box-shadow:
        0 8px 25px
        rgba(35, 82, 130, .05);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.fi-industry-feature:hover {

    border-color:
        #c5dcf5;

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

    box-shadow:
        0 15px 35px
        rgba(37,99,235,.08);
}


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

.fi-feature-text h4 {

    color:
        #163d68;
}


/* =========================================================
   FEATURE DESCRIPTION
========================================================= */

.fi-feature-text p {

    color:
        #71839a;
}


/* =========================================================
   LABEL
========================================================= */

.fi-industry-label {

    color:
        #2379d5;
}


.fi-industry-label span {

    background:
        #2196e8;

    box-shadow:
        0 0 0 5px
        rgba(33,150,232,.09);
}


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

.fi-industry-btn {

    border:
        1px solid #cfe3f7;

    background:
        #ffffff;

    color:
        #176bc0;

    box-shadow:
        0 8px 22px
        rgba(37,99,235,.07);
}


.fi-industry-btn span {

    background:
        linear-gradient(
            135deg,
            #28a9ed,
            #2563eb
        );
}


.fi-industry-btn:hover {

    border-color:
        #a8cff0;

    background:
        #ffffff;

    color:
        #125da7;

    box-shadow:
        0 12px 30px
        rgba(37,99,235,.12);
}


/* =========================================================
   STAT CARDS - WHITE VERSION
========================================================= */

.fi-stat-card {

    min-height: 250px;

    border:
        1px solid #dfe9f4;

    border-radius: 20px;

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

    box-shadow:
        0 15px 40px
        rgba(30, 70, 110, .08);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);
}


.fi-stat-card:hover {

    border-color:
        #c5dcf5;

    box-shadow:
        0 25px 60px
        rgba(37,99,235,.13);
}


/* =========================================================
   STAT CARD DECORATION
========================================================= */

.fi-stat-card::before {

    background:
        rgba(59,130,246,.06);
}


/* =========================================================
   STAT NUMBER
========================================================= */

.fi-stat-number {

    color:
        #a1b2c6;
}


/* =========================================================
   STAT VALUE
========================================================= */

.fi-stat-value {

    color:
        #123b70;
}


.fi-stat-value small {

    color:
        #167bd4;
}


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

.fi-stat-card h3 {

    color:
        #183e69;
}


/* =========================================================
   STAT DESCRIPTION
========================================================= */

.fi-stat-card p {

    color:
        #71839a;
}


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

.fi-stat-icon {

    background:
        #eef7ff;

    border:
        1px solid #d9eafa;

    color:
        #2185db;
}


.fi-stat-purple .fi-stat-icon {

    background:
        #f2efff;

    border-color:
        #e6ddff;

    color:
        #7657d8;
}


.fi-stat-cyan .fi-stat-icon {

    background:
        #edf9ff;

    border-color:
        #d7f1fc;

    color:
        #1599d1;
}


.fi-stat-green .fi-stat-icon {

    background:
        #ecfaf4;

    border-color:
        #d5f1e4;

    color:
        #15956a;
}


/* =========================================================
   BOTTOM LINES
========================================================= */

.fi-stat-card::after {

    background:
        linear-gradient(
            90deg,
            #3b9fea,
            transparent
        );
}


.fi-stat-purple::after {

    background:
        linear-gradient(
            90deg,
            #8b6de5,
            transparent
        );
}


.fi-stat-cyan::after {

    background:
        linear-gradient(
            90deg,
            #28a9e8,
            transparent
        );
}


.fi-stat-green::after {

    background:
        linear-gradient(
            90deg,
            #28b980,
            transparent
        );
}


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

@media (max-width: 991px) {

    .fi-industry-section {

        padding:
            75px 0;
    }

}


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

@media (max-width: 650px) {

    .fi-industry-section {

        padding:
            60px 0;
    }

    .fi-industry-container {

        padding:
            0 17px;
    }

    .fi-industry-grid-bg {

        left: 0;

        width: 100%;

        opacity: .30;
    }

    .fi-industry-content h2 {

        font-size:
            34px;
    }

    .fi-stat-card {

        min-height:
            215px;
    }

}




/* 
==========================our section css ================================== */



/* =========================================================
   FUTURE INFOSYS
   MODERN SERVICES SECTION
   LIGHT + DOTTED FOOTER STYLE
========================================================= */


/* =========================================================
   MAIN SECTION
========================================================= */

.fi-modern-services {

    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background:
        linear-gradient(
            180deg,
            #f9fbfe 0%,
            #f3f7fc 100%
        );

}


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

.fi-modern-services::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #56b8f4,
            #347ee0,
            #8975e8,
            transparent
        );

    opacity: .55;

}


/* =========================================================
   DOT PATTERN
========================================================= */

.fi-services-pattern {

    position: absolute;

    z-index: 0;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    opacity: .48;

    background-image:
        radial-gradient(
            circle,
            rgba(48, 115, 184, .20) 1.1px,
            transparent 1.5px
        );

    background-size:
        8px 8px;

    mask-image:
        radial-gradient(
            ellipse 72% 60% at 50% 45%,
            #000 0%,
            rgba(0,0,0,.85) 45%,
            transparent 82%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse 72% 60% at 50% 45%,
            #000 0%,
            rgba(0,0,0,.85) 45%,
            transparent 82%
        );

}


/* =========================================================
   BACKGROUND DOT CLUSTERS
========================================================= */

.fi-services-pattern::before {

    content: "";

    position: absolute;

    left: 5%;
    top: 12%;

    width: 310px;
    height: 230px;

    opacity: .55;

    background-image:
        radial-gradient(
            circle,
            rgba(42, 120, 200, .16) 1px,
            transparent 1.5px
        );

    background-size:
        8px 8px;

    border-radius:
        45% 55% 60% 40%;

    transform:
        rotate(-10deg);

}


.fi-services-pattern::after {

    content: "";

    position: absolute;

    right: 4%;
    bottom: 12%;

    width: 350px;
    height: 240px;

    opacity: .45;

    background-image:
        radial-gradient(
            circle,
            rgba(93, 104, 206, .15) 1px,
            transparent 1.5px
        );

    background-size:
        8px 8px;

    border-radius:
        60% 40% 45% 55%;

    transform:
        rotate(8deg);

}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.fi-services-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);

}


.fi-glow-left {

    width: 430px;
    height: 430px;

    left: -250px;
    top: -180px;

    background:
        rgba(59, 130, 246, .07);

}


.fi-glow-right {

    width: 450px;
    height: 450px;

    right: -250px;
    bottom: -200px;

    background:
        rgba(124, 92, 230, .06);

}


/* =========================================================
   CONTAINER
========================================================= */

.fi-services-container {

    position: relative;

    z-index: 5;

    max-width: 1250px;

    width: 100%;

    margin: 0 auto;

    padding: 0 25px;

}


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

.fi-services-heading {

    max-width: 720px;

    margin:
        0 auto 55px;

    text-align: center;

}


/* =========================================================
   LABEL
========================================================= */

.fi-services-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 13px;

    color: #2576c7;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;

}


.fi-services-label span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #22a9e8;

    box-shadow:
        0 0 0 5px
        rgba(34,169,232,.09);

}


/* =========================================================
   HEADING
========================================================= */

.fi-services-heading h2 {

    margin: 0;

    color:
        #163a63;

    font-size:
        46px;

    line-height:
        1.15;

    font-weight:
        800;

    letter-spacing:
        -1.4px;

}


.fi-services-heading h2 strong {

    display: block;

    background:
        linear-gradient(
            90deg,
            #1675d1,
            #3b82f6,
            #7657d8
        );

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;

}


/* =========================================================
   HEADER DESCRIPTION
========================================================= */

.fi-services-heading p {

    max-width:
        650px;

    margin:
        17px auto 0;

    color:
        #71839a;

    font-size:
        13px;

    line-height:
        1.85;

}


/* =========================================================
   SERVICES GRID
========================================================= */

.fi-services-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        22px;

}


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

.fi-service-card {

    position:
        relative;

    overflow:
        hidden;

    min-width:
        0;

    border:
        1px solid #e1eaf3;

    border-radius:
        21px;

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

    box-shadow:
        0 12px 35px
        rgba(32, 73, 112, .07);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;

}


/* =========================================================
   CARD HOVER
========================================================= */

.fi-service-card:hover {

    transform:
        translateY(-8px);

    border-color:
        #c5dcf3;

    box-shadow:
        0 25px 55px
        rgba(38, 104, 175, .13);

}


/* =========================================================
   CARD TOP
========================================================= */

.fi-card-top {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        150px;

    padding:
        22px;

    background:
        linear-gradient(
            135deg,
            #f5f9fd,
            #edf4fb
        );

}


/* =========================================================
   NUMBER
========================================================= */

.fi-service-index {

    position:
        absolute;

    top:
        18px;

    left:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    border:
        1px solid #dbe8f4;

    border-radius:
        13px;

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

    color:
        #2374bd;

    font-size:
        11px;

    font-weight:
        800;

    box-shadow:
        0 8px 20px
        rgba(40,85,125,.10);

}


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

.fi-service-icon {

    position:
        absolute;

    right:
        20px;

    bottom:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        78px;

    height:
        78px;

    border:
        1px solid #dceaf6;

    border-radius:
        22px;

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

    box-shadow:
        0 12px 28px
        rgba(39,91,139,.10);

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


.fi-service-icon img {

    display:
        block;

    width:
        52px;

    height:
        52px;

    object-fit:
        contain;

    transition:
        transform .4s ease;

}


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

.fi-service-card:hover
.fi-service-icon {

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 35px
        rgba(39,91,139,.15);

}


.fi-service-card:hover
.fi-service-icon img {

    transform:
        scale(1.08);

}


/* =========================================================
   CARD CONTENT
========================================================= */

.fi-card-content {

    padding:
        24px 24px 25px;

}


/* =========================================================
   CATEGORY
========================================================= */

.fi-card-category {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    margin-bottom:
        9px;

    color:
        #167bd0;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.3px;

}


.fi-card-category::before {

    content:
        "";

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #1fa5e5;

}


/* =========================================================
   CATEGORY COLORS
========================================================= */

.fi-card-category.purple {
    color:
        #7555d7;
}

.fi-card-category.purple::before {
    background:
        #8b5cf6;
}


.fi-card-category.green {
    color:
        #15956a;
}

.fi-card-category.green::before {
    background:
        #10b981;
}


.fi-card-category.orange {
    color:
        #d17a20;
}

.fi-card-category.orange::before {
    background:
        #f59e0b;
}


.fi-card-category.cyan {
    color:
        #1389b9;
}

.fi-card-category.cyan::before {
    background:
        #22b8e8;
}


.fi-card-category.red {
    color:
        #d45757;
}

.fi-card-category.red::before {
    background:
        #ef6262;
}


.fi-card-category.blue {
    color:
        #256ec2;
}

.fi-card-category.blue::before {
    background:
        #3b82f6;
}


.fi-card-category.violet {
    color:
        #7358c7;
}

.fi-card-category.violet::before {
    background:
        #8b5cf6;
}


.fi-card-category.teal {
    color:
        #148d86;
}

.fi-card-category.teal::before {
    background:
        #14b8a6;
}


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

.fi-card-content h3 {

    min-height:
        52px;

    margin:
        0;

    color:
        #163a61;

    font-size:
        19px;

    line-height:
        1.35;

    font-weight:
        800;

    letter-spacing:
        -.35px;

}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.fi-card-content p {

    min-height:
        61px;

    margin:
        10px 0 20px;

    color:
        #72849a;

    font-size:
        11px;

    line-height:
        1.75;

}


/* =========================================================
   SERVICE ARROW
========================================================= */

.fi-service-arrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #1974c8;

    font-size:
        10px;

    font-weight:
        700;

    text-decoration:
        none;

}


.fi-service-arrow b {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        29px;

    height:
        29px;

    border-radius:
        50%;

    background:
        #edf6ff;

    color:
        #1974c8;

    font-size:
        15px;

    font-weight:
        500;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;

}


.fi-service-arrow:hover {

    color:
        #095ca8;

}


.fi-service-arrow:hover b {

    transform:
        translateX(5px);

    background:
        #1974c8;

    color:
        #ffffff;

}


/* =========================================================
   ARROW COLORS
========================================================= */

.purple-arrow {
    color:
        #7657d8;
}

.purple-arrow b {

    background:
        #f1edff;

    color:
        #7657d8;

}


.purple-arrow:hover b {

    background:
        #7657d8;

    color:
        #ffffff;

}


.green-arrow {
    color:
        #15956a;
}

.green-arrow b {

    background:
        #eafaf4;

    color:
        #15956a;

}


.green-arrow:hover b {

    background:
        #15956a;

    color:
        #ffffff;

}


.orange-arrow {
    color:
        #d17a20;
}

.orange-arrow b {

    background:
        #fff5e8;

    color:
        #d17a20;

}


.orange-arrow:hover b {

    background:
        #d17a20;

    color:
        #ffffff;

}


.cyan-arrow {
    color:
        #1389b9;
}

.cyan-arrow b {

    background:
        #eaf9ff;

    color:
        #1389b9;

}


.cyan-arrow:hover b {

    background:
        #1389b9;

    color:
        #ffffff;

}


.red-arrow {
    color:
        #d45757;
}

.red-arrow b {

    background:
        #fff0f0;

    color:
        #d45757;

}


.red-arrow:hover b {

    background:
        #d45757;

    color:
        #ffffff;

}


.blue-arrow {
    color:
        #256ec2;
}

.blue-arrow b {

    background:
        #edf5ff;

    color:
        #256ec2;

}


.blue-arrow:hover b {

    background:
        #256ec2;

    color:
        #ffffff;

}


.violet-arrow {
    color:
        #7358c7;
}

.violet-arrow b {

    background:
        #f3efff;

    color:
        #7358c7;

}


.violet-arrow:hover b {

    background:
        #7358c7;

    color:
        #ffffff;

}


.teal-arrow {
    color:
        #148d86;
}

.teal-arrow b {

    background:
        #e9f9f7;

    color:
        #148d86;

}


.teal-arrow:hover b {

    background:
        #148d86;

    color:
        #ffffff;

}


/* =========================================================
   CARD TOP BLUE LINE
========================================================= */

.fi-service-card::before {

    content:
        "";

    position:
        absolute;

    z-index:
        10;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        2px;

    opacity:
        0;

    background:
        linear-gradient(
            90deg,
            #22b8ee,
            #3b82f6,
            #8b6de8
        );

    transition:
        opacity .3s ease;

}


.fi-service-card:hover::before {

    opacity:
        1;

}


/* =========================================================
   BOTTOM CTA
========================================================= */

.fi-services-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    margin-top:
        45px;

    padding:
        25px 28px;

    border:
        1px solid #dce8f3;

    border-radius:
        19px;

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

    box-shadow:
        0 10px 30px
        rgba(32,73,112,.05);

    backdrop-filter:
        blur(10px);

}


.fi-services-bottom span {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #287bc5;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.4px;

}


.fi-services-bottom h3 {

    margin:
        0;

    color:
        #163b64;

    font-size:
        20px;

    font-weight:
        800;

}


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

.fi-services-cta {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        9px 10px 9px 17px;

    border-radius:
        11px;

    background:
        linear-gradient(
            135deg,
            #168bd8,
            #326ce0
        );

    color:
        #ffffff;

    font-size:
        10px;

    font-weight:
        700;

    text-decoration:
        none;

    box-shadow:
        0 10px 25px
        rgba(37,99,235,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.fi-services-cta b {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    border-radius:
        50%;

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

    font-size:
        15px;

    font-weight:
        400;

}


.fi-services-cta:hover {

    transform:
        translateY(-2px);

    color:
        #ffffff;

    box-shadow:
        0 15px 30px
        rgba(37,99,235,.25);

}


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

@media (max-width: 1100px) {

    .fi-services-grid {

        gap:
            17px;

    }

    .fi-card-content {

        padding:
            21px;

    }

    .fi-card-content h3 {

        font-size:
            17px;

    }

}


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

@media (max-width: 991px) {

    .fi-modern-services {

        padding:
            75px 0;

    }

    .fi-services-heading h2 {

        font-size:
            40px;

    }

    .fi-services-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            20px;

    }

    .fi-card-top {

        min-height:
            145px;

    }

}


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

@media (max-width: 650px) {

    .fi-modern-services {

        padding:
            60px 0;

    }

    .fi-services-container {

        padding:
            0 16px;

    }

    .fi-services-heading {

        margin-bottom:
            35px;

    }

    .fi-services-heading h2 {

        font-size:
            32px;

        letter-spacing:
            -.8px;

    }

    .fi-services-heading p {

        font-size:
            12px;

    }

    .fi-services-grid {

        grid-template-columns:
            1fr;

        gap:
            16px;

    }

    .fi-card-top {

        min-height:
            140px;

    }

    .fi-services-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

    .fi-services-cta {

        width:
            100%;

        justify-content:
            space-between;

    }

}


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

@media (max-width: 430px) {

    .fi-services-heading h2 {

        font-size:
            29px;

    }

    .fi-card-top {

        min-height:
            135px;

        padding:
            18px;

    }

    .fi-service-index {

        top:
            15px;

        left:
            15px;

        width:
            39px;

        height:
            39px;

        border-radius:
            12px;

    }

    .fi-service-icon {

        right:
            17px;

        bottom:
            15px;

        width:
            70px;

        height:
            70px;

    }

    .fi-service-icon img {

        width:
            47px;

        height:
            47px;

    }

    .fi-card-content {

        padding:
            21px 20px 23px;

    }

    .fi-card-content h3 {

        font-size:
            18px;

    }

    .fi-services-bottom {

        padding:
            21px;

    }

    .fi-services-bottom h3 {

        font-size:
            18px;

    }

}


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

@media (max-width: 360px) {

    .fi-services-heading h2 {

        font-size:
            27px;

    }

    .fi-card-content h3 {

        font-size:
            17px;

    }

}



/* ==================abouts ============================================= */


/* =========================================================
   FUTURE INFOSYS
   MODERN ABOUT SECTION
   LIGHT + DOTTED BACKGROUND
========================================================= */


/* =========================================================
   MAIN SECTION
========================================================= */

.fi-about-section {

    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background:
        linear-gradient(
            180deg,
            #f9fbfe 0%,
            #f3f7fc 100%
        );

}


/* =========================================================
   TOP LINE
========================================================= */

.fi-about-section::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #57b9f2,
            #357fe0,
            #8976e8,
            transparent
        );

    opacity: .45;

}


/* =========================================================
   DOT BACKGROUND
========================================================= */

.fi-about-pattern {

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: .48;

    background-image:
        radial-gradient(
            circle,
            rgba(49,118,187,.18) 1.1px,
            transparent 1.5px
        );

    background-size:
        8px 8px;

    mask-image:
        radial-gradient(
            ellipse 75% 65% at 50% 50%,
            #000 0%,
            rgba(0,0,0,.85) 45%,
            transparent 82%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse 75% 65% at 50% 50%,
            #000 0%,
            rgba(0,0,0,.85) 45%,
            transparent 82%
        );

}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.fi-about-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(110px);

}


.fi-about-glow-left {

    width: 430px;
    height: 430px;

    left: -240px;
    top: -160px;

    background:
        rgba(59,130,246,.07);

}


.fi-about-glow-right {

    width: 420px;
    height: 420px;

    right: -230px;
    bottom: -180px;

    background:
        rgba(124,92,230,.065);

}


/* =========================================================
   CONTAINER
========================================================= */

.fi-about-container {

    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1250px;

    margin: 0 auto;

    padding:
        0 25px;

}


/* =========================================================
   MAIN GRID
========================================================= */

.fi-about-grid {

    display: grid;

    grid-template-columns:
        .92fr
        1.08fr;

    gap:
        75px;

    align-items:
        center;

}


/* =========================================================
   IMAGE AREA
========================================================= */

.fi-about-visual {

    position: relative;

    min-height:
        550px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* =========================================================
   IMAGE BOX
========================================================= */

.fi-about-image-box {

    position: relative;

    width:
        100%;

    max-width:
        520px;

    height:
        500px;

    border-radius:
        32px;

    padding:
        12px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            rgba(228,239,249,.9)
        );

    border:
        1px solid #dce8f3;

    box-shadow:
        0 25px 65px
        rgba(30,75,120,.11);

}


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

.fi-about-image-box img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    border-radius:
        24px;

    transition:
        transform .7s
        cubic-bezier(.2,.8,.2,1);

}


.fi-about-image-box:hover img {

    transform:
        scale(1.025);

}


/* =========================================================
   IMAGE LIGHT OVERLAY
========================================================= */

.fi-about-image-box::after {

    content:
        "";

    position:
        absolute;

    inset:
        12px;

    border-radius:
        24px;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0) 45%,
            rgba(8,40,75,.28) 100%
        );

}


/* =========================================================
   IMAGE GLOW
========================================================= */

.fi-about-image-glow {

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    right:
        -70px;

    top:
        -70px;

    border-radius:
        50%;

    background:
        rgba(55,151,224,.13);

    filter:
        blur(60px);

    pointer-events:
        none;

}


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

.fi-experience-badge {

    position:
        absolute;

    z-index:
        10;

    left:
        -30px;

    bottom:
        48px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        15px 20px;

    border:
        1px solid rgba(255,255,255,.85);

    border-radius:
        17px;

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

    box-shadow:
        0 18px 40px
        rgba(31,77,119,.16);

    backdrop-filter:
        blur(15px);

}


.fi-experience-badge strong {

    color:
        #176fc2;

    font-size:
        29px;

    line-height:
        1;

    font-weight:
        800;

}


.fi-experience-badge span {

    color:
        #70849a;

    font-size:
        9px;

    line-height:
        1.45;

    font-weight:
        700;

}


/* =========================================================
   FLOATING CARD
========================================================= */

.fi-about-floating-card {

    position:
        absolute;

    z-index:
        11;

    right:
        -25px;

    top:
        60px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 15px;

    border:
        1px solid #dce9f4;

    border-radius:
        14px;

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

    box-shadow:
        0 15px 35px
        rgba(32,78,119,.12);

    backdrop-filter:
        blur(12px);

}


.fi-floating-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        33px;

    height:
        33px;

    border-radius:
        10px;

    background:
        #eaf8f2;

    color:
        #12a26d;

    font-size:
        14px;

    font-weight:
        800;

}


.fi-about-floating-card strong {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #183e67;

    font-size:
        10px;

    font-weight:
        800;

}


.fi-about-floating-card span {

    display:
        block;

    color:
        #8394a8;

    font-size:
        8px;

}


/* =========================================================
   DECORATIVE DOT
========================================================= */

.fi-about-dot-decoration {

    position:
        absolute;

    z-index:
        -1;

    left:
        -45px;

    top:
        25px;

    width:
        130px;

    height:
        130px;

    background-image:
        radial-gradient(
            circle,
            rgba(36,119,190,.30) 1px,
            transparent 1.5px
        );

    background-size:
        8px 8px;

}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.fi-about-content {

    max-width:
        620px;

}


/* =========================================================
   LABEL
========================================================= */

.fi-about-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        15px;

    color:
        #2577c5;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.7px;

}


.fi-about-label span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #25a7e5;

    box-shadow:
        0 0 0 5px
        rgba(37,167,229,.09);

}


/* =========================================================
   HEADING
========================================================= */

.fi-about-content h2 {

    margin:
        0;

    color:
        #143b65;

    font-size:
        43px;

    line-height:
        1.15;

    font-weight:
        800;

    letter-spacing:
        -1.2px;

}


.fi-about-content h2 strong {

    background:
        linear-gradient(
            90deg,
            #1675d1,
            #3b82f6,
            #7657d8
        );

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.fi-about-description {

    max-width:
        580px;

    margin:
        18px 0 27px;

    color:
        #71849a;

    font-size:
        13px;

    line-height:
        1.85;

}


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

.fi-about-features {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

}


/* =========================================================
   FEATURE ITEM
========================================================= */

.fi-about-feature {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    padding:
        13px 15px;

    border:
        1px solid #e1eaf3;

    border-radius:
        13px;

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

    box-shadow:
        0 7px 20px
        rgba(32,73,112,.035);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}


.fi-about-feature:hover {

    transform:
        translateX(5px);

    border-color:
        #c9dff2;

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

    box-shadow:
        0 12px 28px
        rgba(37,99,235,.07);

}


/* =========================================================
   CHECK
========================================================= */

.fi-feature-check {

    display:
        flex;

    flex-shrink:
        0;

    align-items:
        center;

    justify-content:
        center;

    width:
        30px;

    height:
        30px;

    border-radius:
        9px;

    background:
        #edf7ff;

    color:
        #1980d4;

    font-size:
        12px;

    font-weight:
        800;

}


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

.fi-about-feature h3 {

    margin:
        0 0 3px;

    color:
        #193f67;

    font-size:
        12px;

    font-weight:
        800;

}


/* =========================================================
   FEATURE TEXT
========================================================= */

.fi-about-feature p {

    margin:
        0;

    color:
        #7a8da2;

    font-size:
        10px;

    line-height:
        1.65;

}


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

.fi-about-bottom {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    margin-top:
        28px;

    padding-top:
        23px;

    border-top:
        1px solid #dfe8f1;

}


/* =========================================================
   STAT
========================================================= */

.fi-about-stat {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    flex-shrink:
        0;

}


.fi-about-stat strong {

    color:
        #1675d1;

    font-size:
        32px;

    line-height:
        1;

    font-weight:
        800;

}


.fi-about-stat span {

    color:
        #71859b;

    font-size:
        8px;

    line-height:
        1.4;

    font-weight:
        700;

}


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

.fi-about-divider {

    width:
        1px;

    height:
        43px;

    background:
        #dce6ef;

}


/* =========================================================
   FOUNDED
========================================================= */

.fi-about-founded {

    flex:
        1;

}


.fi-about-founded span {

    display:
        block;

    margin-bottom:
        4px;

    color:
        #2a7bc5;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        1.3px;

}


.fi-about-founded h3 {

    margin:
        0;

    color:
        #23496f;

    font-size:
        11px;

    line-height:
        1.45;

    font-weight:
        700;

}


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

.fi-about-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    flex-shrink:
        0;

    padding:
        8px 9px 8px 14px;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #168bd8,
            #326ce0
        );

    color:
        #ffffff;

    font-size:
        9px;

    font-weight:
        700;

    text-decoration:
        none;

    box-shadow:
        0 9px 22px
        rgba(37,99,235,.16);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.fi-about-button b {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        25px;

    height:
        25px;

    border-radius:
        50%;

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

    font-size:
        14px;

    font-weight:
        400;

}


.fi-about-button:hover {

    color:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 28px
        rgba(37,99,235,.23);

}


.fi-about-button:hover b {

    transform:
        translateX(3px);

}


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

@media (max-width: 1100px) {

    .fi-about-grid {

        gap:
            45px;

    }

    .fi-about-content h2 {

        font-size:
            38px;

    }

}


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

@media (max-width: 991px) {

    .fi-about-section {

        padding:
            75px 0;

    }

    .fi-about-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }

    .fi-about-visual {

        min-height:
            500px;

    }

    .fi-about-content {

        max-width:
            750px;

    }

    .fi-about-description {

        max-width:
            700px;

    }

}


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

@media (max-width: 650px) {

    .fi-about-section {

        padding:
            60px 0;

    }

    .fi-about-container {

        padding:
            0 17px;

    }

    .fi-about-visual {

        min-height:
            390px;

    }

    .fi-about-image-box {

        height:
            370px;

        padding:
            8px;

        border-radius:
            25px;

    }

    .fi-about-image-box img {

        border-radius:
            19px;

    }

    .fi-about-image-box::after {

        inset:
            8px;

        border-radius:
            19px;

    }

    .fi-about-floating-card {

        right:
            -5px;

        top:
            30px;

    }

    .fi-experience-badge {

        left:
            -5px;

        bottom:
            25px;

    }

    .fi-about-content h2 {

        font-size:
            32px;

    }

    .fi-about-description {

        font-size:
            12px;

    }

    .fi-about-bottom {

        align-items:
            flex-start;

        flex-wrap:
            wrap;

    }

    .fi-about-divider {

        display:
            none;

    }

    .fi-about-founded {

        min-width:
            180px;

    }

}


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

@media (max-width: 430px) {

    .fi-about-visual {

        min-height:
            330px;

    }

    .fi-about-image-box {

        height:
            315px;

    }

    .fi-about-floating-card {

        padding:
            9px 11px;

    }

    .fi-about-floating-card strong {

        font-size:
            8px;

    }

    .fi-about-floating-card span {

        font-size:
            7px;

    }

    .fi-experience-badge {

        padding:
            12px 15px;

    }

    .fi-experience-badge strong {

        font-size:
            24px;

    }

    .fi-about-content h2 {

        font-size:
            29px;

    }

    .fi-about-feature {

        padding:
            12px;

    }

    .fi-about-bottom {

        gap:
            14px;

    }

    .fi-about-button {

        width:
            100%;

        justify-content:
            space-between;

    }

}



/* 
==================abouts us upper ka css ============================ */



/* =========================================================
   DEDICATED SUPPORT
========================================================= */

.fi-support-section {

    position: relative;

    overflow: hidden;

    padding: 90px 0;

    background:
        linear-gradient(
            180deg,
            #f9fbfe 0%,
            #f1f6fb 100%
        );

}


/* TOP LINE */

.fi-support-section::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4bb9ed,
            #337fe0,
            #8165db,
            transparent
        );

    opacity: .55;

}


/* DOT PATTERN */

.fi-support-pattern {

    position: absolute;

    inset: 0;

    opacity: .45;

    pointer-events: none;

    background-image:
        radial-gradient(
            circle,
            rgba(45,118,185,.18) 1px,
            transparent 1.5px
        );

    background-size:
        8px 8px;

    mask-image:
        radial-gradient(
            ellipse 75% 70% at 50% 50%,
            #000,
            transparent 90%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse 75% 70% at 50% 50%,
            #000,
            transparent 90%
        );

}


/* GLOW */

.fi-support-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);

}


.fi-support-glow-one {

    width: 400px;
    height: 400px;

    left: -220px;
    top: -180px;

    background:
        rgba(38,146,224,.08);

}


.fi-support-glow-two {

    width: 420px;
    height: 420px;

    right: -240px;
    bottom: -190px;

    background:
        rgba(119,88,220,.07);

}


/* MAIN WRAPPER */

.fi-support-wrapper {

    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: center;

    padding: 45px;

    border:
        1px solid #dce8f2;

    border-radius: 25px;

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

    box-shadow:
        0 20px 55px
        rgba(32,73,112,.07);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

}


/* LABEL */

.fi-support-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    color:
        #247bc7;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;

}


.fi-support-label-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #29a8e5;

    box-shadow:
        0 0 0 5px
        rgba(41,168,229,.10);

}


/* HEADING */

.fi-support-heading h2 {

    margin: 0;

    color:
        #163e66;

    font-size:
        40px;

    line-height:
        1.17;

    font-weight:
        800;

    letter-spacing:
        -1px;

}


.fi-support-heading h2 span {

    display: block;

    margin-top: 5px;

    background:
        linear-gradient(
            90deg,
            #187bd2,
            #3d82ee,
            #795bd9
        );

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;

}


/* ACCENT LINE */

.fi-support-line {

    width: 65px;

    height: 4px;

    margin-top: 20px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #188bd8,
            #7659d9
        );

}


/* CONTENT */

.fi-support-content {

    padding-left: 10px;

}


.fi-support-content p {

    margin:
        0 0 13px;

    color:
        #71869c;

    font-size:
        12px;

    line-height:
        1.85;

}


/* BUTTON */

.fi-support-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 10px;

    padding:
        9px 10px 9px 17px;

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #168bd8,
            #326ce0
        );

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    box-shadow:
        0 10px 25px
        rgba(37,99,235,.17);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.fi-support-button b {

    display: flex;

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

    width: 25px;
    height: 25px;

    border-radius: 50%;

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

    font-size: 14px;

    font-weight: 400;

}


.fi-support-button:hover {

    color: #fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 32px
        rgba(37,99,235,.23);

}


.fi-support-button:hover b {

    transform:
        translateX(3px);

}


/* =========================================================
   FEATURE STRIP
========================================================= */

.fi-support-features {

    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top: 20px;

    border:
        1px solid #dce8f2;

    border-radius: 18px;

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

    box-shadow:
        0 12px 35px
        rgba(32,73,112,.055);

    overflow: hidden;

}


/* FEATURE */

.fi-support-feature {

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        20px 18px;

    border-right:
        1px solid #e1eaf2;

    transition:
        background .3s ease;

}


.fi-support-feature:last-child {

    border-right:
        none;

}


.fi-support-feature:hover {

    background:
        rgba(242,248,253,.9);

}


/* FEATURE ICON */

.fi-support-feature-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 34px;

    height: 34px;

    border-radius: 10px;

    background:
        #edf7ff;

    color:
        #1980d4;

    font-size: 12px;

    font-weight: 800;

}


/* FEATURE TEXT */

.fi-support-feature strong {

    display: block;

    margin-bottom: 3px;

    color:
        #21486d;

    font-size: 10px;

    font-weight: 800;

}


.fi-support-feature span {

    display: block;

    color:
        #8192a5;

    font-size: 8px;

}


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

@media (max-width: 991px) {

    .fi-support-section {

        padding: 70px 0;

    }

    .fi-support-wrapper {

        grid-template-columns:
            1fr;

        gap: 30px;

        padding: 35px;

    }

    .fi-support-content {

        padding-left: 0;

    }

    .fi-support-features {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .fi-support-feature:nth-child(2) {

        border-right: none;

    }

    .fi-support-feature:nth-child(-n+2) {

        border-bottom:
            1px solid #e1eaf2;

    }

}


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

@media (max-width: 650px) {

    .fi-support-section {

        padding: 55px 0;

    }

    .fi-support-wrapper {

        padding: 27px 22px;

        border-radius: 20px;

    }

    .fi-support-heading h2 {

        font-size: 30px;

    }

    .fi-support-content p {

        font-size: 11px;

    }

    .fi-support-features {

        grid-template-columns:
            1fr;

    }

    .fi-support-feature {

        border-right: none;

        border-bottom:
            1px solid #e1eaf2;

    }

    .fi-support-feature:last-child {

        border-bottom: none;

    }

}


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

@media (max-width: 430px) {

    .fi-support-heading h2 {

        font-size: 27px;

    }

    .fi-support-wrapper {

        padding:
            25px 19px;

    }

}

/* 
==========================sldier css ========================================== */


/* =========================================================
   FUTURE INFOSYS MODERN IMAGE HERO
========================================================= */





/* =========================================
   SIMPLE PROFESSIONAL SLIDER
========================================= */

.simple-slider {
    position: relative;
    width: 100%;
    min-height: 650px;
    overflow: hidden;

    background: #f8fbff;
}


/* subtle dots */

.simple-slider::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: radial-gradient(
        rgba(0, 100, 180, .10) 1px,
        transparent 1px
    );

    background-size: 14px 14px;

    opacity: .5;
}


/* SLIDE */

.simple-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    min-height: 650px;

    padding: 60px 7%;

    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;

    opacity: 0;
    visibility: hidden;

    transition: opacity .6s ease;
}


.simple-slide.active {
    opacity: 1;
    visibility: visible;
}


/* CONTENT */

.simple-content {
    position: relative;
    z-index: 5;

    max-width: 600px;
}


/* LABEL */

.simple-label {
    display: inline-block;

    padding: 10px 18px;

    border-radius: 30px;

    background: #ffffff;

    border: 1px solid #e3edf6;

    color: #0875d1;

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

    text-transform: uppercase;

    box-shadow: 0 8px 25px rgba(0,60,120,.08);
}


/* HEADING */

.simple-content h1 {
    margin: 25px 0 20px;

    color: #07366f;

    font-size: clamp(45px, 5vw, 72px);

    line-height: 1.05;

    font-weight: 500;

    letter-spacing: -2px;
}


.simple-content h1 span {
    display: block;

    color: #087bea;
}


/* TEXT */

.simple-content p {
    max-width: 570px;

    margin-bottom: 30px;

    color: #667b91;

    font-size: 16px;

    line-height: 1.7;
}


/* BUTTONS */

.simple-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}


.simple-btn,
.simple-btn-outline {
    display: inline-flex;

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

    min-height: 52px;

    padding: 0 23px;

    border-radius: 30px;

    text-decoration: none;

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

    transition: .3s ease;
}


.simple-btn {
    color: #fff;

    background: #087bea;

    box-shadow:
        0 12px 30px rgba(0,120,230,.22);
}


.simple-btn:hover {
    transform: translateY(-2px);

    background: #0568c7;
}


.simple-btn-outline {
    color: #07549b;

    background: #fff;

    border: 1px solid #dce8f3;
}


.simple-btn-outline:hover {
    color: #fff;

    background: #087bea;

    border-color: #087bea;
}


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

.simple-image {
    position: relative;

    width: 100%;

    display: flex;

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

    padding: 20px;
}


.simple-image img {
    display: block;

    width: 100%;

    max-width: 720px;

    max-height: 540px;

    height: auto;

    object-fit: contain;

    border-radius: 20px;

    box-shadow:
        0 20px 50px rgba(0,50,100,.12);
}


/* =========================================
   ARROWS
========================================= */

.simple-prev,
.simple-next {
    position: absolute;

    top: 50%;

    width: 45px;
    height: 45px;

    border: 1px solid #dce8f3;

    border-radius: 50%;

    background: #fff;

    color: #087bea;

    font-size: 18px;

    cursor: pointer;

    transform: translateY(-50%);

    z-index: 20;

    box-shadow:
        0 8px 25px rgba(0,50,100,.10);

    transition: .3s;
}


.simple-prev {
    left: 20px;
}

.simple-next {
    right: 20px;
}


.simple-prev:hover,
.simple-next:hover {
    color: #fff;
    background: #087bea;
}


/* =========================================
   DOTS
========================================= */

.simple-dots {
    position: absolute;

    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);

    display: flex;

    gap: 7px;

    z-index: 30;
}


.simple-dots button {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 20px;

    background: #b8c9d9;

    cursor: pointer;

    transition: .3s;
}


.simple-dots button.active {
    width: 25px;

    background: #087bea;
}


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

@media (max-width: 1000px) {

    .simple-slide {
        padding: 50px 5%;

        grid-template-columns: 45% 55%;
    }

    .simple-content h1 {
        font-size: 48px;
    }

    .simple-image img {
        max-height: 430px;
    }

}


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

@media (max-width: 767px) {

    .simple-slider {
        min-height: auto;
    }

    .simple-slide {
        position: relative;

        min-height: auto;

        display: none;

        grid-template-columns: 1fr;

        padding: 55px 6% 75px;

        text-align: center;
    }

    .simple-slide.active {
        display: grid;
    }

    .simple-content {
        margin: auto;
    }

    .simple-content h1 {
        margin-top: 20px;

        font-size: 40px;

        letter-spacing: -1px;
    }

    .simple-content p {
        margin-left: auto;
        margin-right: auto;

        font-size: 14px;
    }

    .simple-buttons {
        justify-content: center;
    }

    .simple-image {
        padding: 25px 0 0;
    }

    .simple-image img {
        width: 100%;

        max-height: none;

        border-radius: 15px;
    }

    .simple-prev,
    .simple-next {
        width: 38px;
        height: 38px;

        font-size: 15px;
    }

    .simple-prev {
        left: 8px;
    }

    .simple-next {
        right: 8px;
    }

}


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

@media (max-width: 480px) {

    .simple-content h1 {
        font-size: 34px;
    }

    .simple-label {
        font-size: 10px;
        padding: 8px 13px;
    }

    .simple-btn,
    .simple-btn-outline {
        min-height: 48px;
        padding: 0 17px;

        font-size: 12px;
    }

}


@media (min-width: 1200px) {
    .simple-image {
        transform: scale(1.25);
    }

    .simple-image img {
        max-width: 1000px;
    }
}






.fi-btn-primary b {

    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 50%;

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

    transition: .3s;
}


.fi-btn-primary:hover {

    transform: translateY(-4px);

    box-shadow:
        0 20px 45px
        rgba(7,89,201,.35);
}


.fi-btn-primary:hover b {

    transform: translateX(4px);
}


.fi-btn-outline {

    display: inline-flex;

    align-items: center;

    padding: 14px 23px;

    border-radius: 50px;

    color: #073d78 !important;

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

    border: 1px solid
        rgba(7,61,120,.16);

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition: .35s;
}


.fi-btn-outline:hover {

    color: #fff !important;

    background: #073d78;

    transform: translateY(-3px);
}


/* =========================================================
   TRUST
========================================================= */

.fi-hero-trust {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 40px;
}


.fi-trust-item {

    display: flex;

    flex-direction: column;
}


.fi-trust-item strong {

    color: #073d78;

    font-size: 24px;

    font-weight: 800;
}


.fi-trust-item span {

    margin-top: 4px;

    color: #7b8b9e;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .5px;
}


.fi-trust-line {

    width: 1px;

    height: 42px;

    background: #ccd9e7;
}


/* =========================================================
   IMAGE AREA
========================================================= */

.fi-slide-visual {

    position: relative;

    height: 570px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Glow behind image */

.fi-image-glow {

    position: absolute;

    width: 480px;
    height: 480px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(26,176,244,.25),
            rgba(10,89,190,.08),
            transparent 70%
        );

    filter: blur(10px);

    animation:
        fi-image-glow 5s ease-in-out infinite;
}


@keyframes fi-image-glow {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}


/* =========================================================
   ORIGINAL SLIDER IMAGE
========================================================= */

.fi-image-frame {

    position: relative;

    width: 610px;

    max-width: 100%;

    height: 460px;

    overflow: hidden;

    border-radius: 35px;

    background: #ffffff;

    border: 8px solid
        rgba(255,255,255,.80);

    box-shadow:
        0 40px 90px
        rgba(5,55,110,.20),

        0 10px 30px
        rgba(5,55,110,.10);

    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);

    transition: .5s;

    z-index: 4;
}


.fi-image-frame:hover {

    transform:
        perspective(1200px)
        rotateY(0)
        rotateX(0)
        translateY(-8px);
}


.fi-image-frame img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 1s ease;
}


.fi-slide.active
.fi-image-frame img {

    transform: scale(1.02);
}


.fi-image-frame:hover img {

    transform: scale(1.06);
}


/* Image shine */

.fi-image-shine {

    position: absolute;

    top: 0;
    left: -100%;

    width: 50%;
    height: 100%;

    z-index: 3;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform: skewX(-20deg);

    animation:
        fi-image-shine 6s infinite;
}


@keyframes fi-image-shine {

    0% {
        left: -100%;
    }

    40%,
    100% {
        left: 150%;
    }
}


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

.fi-floating-card {

    position: absolute;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px 17px;

    border-radius: 15px;

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

    border: 1px solid
        rgba(255,255,255,.9);

    box-shadow:
        0 18px 45px
        rgba(10,70,130,.16);

    backdrop-filter: blur(15px);

    z-index: 10;

    animation:
        fi-float 4s ease-in-out infinite;
}


.fi-card-one {

    left: -10px;

    top: 100px;
}


.fi-card-two {

    right: -5px;

    bottom: 100px;

    animation-delay: 1s;
}


.fi-floating-icon {

    width: 36px;
    height: 36px;

    display: flex;

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

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0aa36f,
            #38d29f
        );

    font-size: 15px;

    font-weight: 800;
}


.fi-floating-icon.blue {

    background:
        linear-gradient(
            135deg,
            #0866d6,
            #22bcea
        );
}


.fi-floating-card strong {

    display: block;

    color: #173d68;

    font-size: 12px;
}


.fi-floating-card small {

    display: block;

    margin-top: 3px;

    color: #8494a7;

    font-size: 9px;
}


@keyframes fi-float {

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

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


/* Number */

.fi-floating-number {

    position: absolute;

    right: 10px;
    top: 45px;

    width: 60px;
    height: 60px;

    display: flex;

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

    border-radius: 50%;

    color: #0763c9;

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

    border: 1px solid #dceafa;

    box-shadow:
        0 15px 35px
        rgba(10,70,130,.14);

    font-size: 15px;

    font-weight: 800;

    z-index: 10;
}


/* =========================================================
   ARROWS
========================================================= */

.fi-slider-arrow {

    position: absolute;

    top: 50%;

    width: 48px;
    height: 48px;

    border: 1px solid
        rgba(7,61,120,.12);

    border-radius: 50%;

    color: #073d78;

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

    box-shadow:
        0 10px 30px
        rgba(10,60,120,.10);

    cursor: pointer;

    z-index: 20;

    transition: .3s;
}


.fi-prev {
    left: 20px;
}


.fi-next {
    right: 20px;
}


.fi-slider-arrow:hover {

    color: #fff;

    background: #0868d5;

    transform: scale(1.1);
}


/* =========================================================
   DOTS
========================================================= */

.fi-slider-dots {

    position: absolute;

    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);

    display: flex;

    gap: 8px;

    z-index: 20;
}


.fi-slider-dots button {

    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 20px;

    background: #b6c7da;

    cursor: pointer;

    transition: .35s;
}


.fi-slider-dots button.active {

    width: 32px;

    background:
        linear-gradient(
            90deg,
            #0868d5,
            #21b8ed
        );
}


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

@media (max-width: 1100px) {

    .fi-slide-container {

        width: calc(100% - 80px);

        grid-template-columns:
            50% 50%;
    }

    .fi-slide-content h1 {

        font-size: 55px;
    }

    .fi-image-frame {

        width: 480px;

        height: 390px;
    }

    .fi-slide-visual {

        height: 480px;
    }
}


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

@media (max-width: 991px) {

    .fi-hero,
    .fi-slider {

        min-height: auto;
    }

    .fi-slide {

        display: none;
    }

    .fi-slide.active {

        display: block;
    }

    .fi-slide-container {

        width: calc(100% - 40px);

        min-height: auto;

        grid-template-columns: 1fr;

        text-align: center;

        padding:
            70px 0 100px;
    }

    .fi-slide-content {

        padding: 0;

        margin: auto;
    }

    .fi-slide-content h1 {

        font-size: 52px;
    }

    .fi-slide-content > p {

        margin-left: auto;
        margin-right: auto;
    }

    .fi-hero-label {

        margin-left: auto;
        margin-right: auto;
    }

    .fi-hero-buttons {

        justify-content: center;
    }

    .fi-hero-trust {

        justify-content: center;
    }

    .fi-slide-visual {

        height: 450px;

        margin-top: 20px;
    }

    .fi-slider-arrow {

        display: none;
    }
}


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

@media (max-width: 600px) {

    .fi-slide-container {

        width: calc(100% - 30px);

        padding-top: 55px;
    }

    .fi-slide-content h1 {

        font-size: 39px;

        letter-spacing: -1px;
    }

    .fi-slide-content > p {

        font-size: 14px;

        line-height: 1.7;
    }

    .fi-hero-label {

        font-size: 9px;

        gap: 7px;

        padding: 7px 9px 7px 7px;
    }

    .fi-label-dot {

        width: 20px;
        height: 20px;

        flex-basis: 20px;
    }

    .fi-hero-label i {

        width: 20px;
        height: 20px;
    }

    .fi-btn-primary,
    .fi-btn-outline {

        width: 100%;

        justify-content: center;
    }

    .fi-slide-visual {

        height: 350px;
    }

    .fi-image-frame {

        width: 100%;

        height: 300px;

        border-radius: 22px;

        border-width: 5px;
    }

    .fi-floating-card {

        padding: 9px 11px;
    }

    .fi-card-one {

        left: -3px;

        top: 30px;
    }

    .fi-card-two {

        right: -3px;

        bottom: 30px;
    }

    .fi-floating-number {

        width: 45px;
        height: 45px;

        right: 0;

        top: 15px;

        font-size: 12px;
    }

    .fi-trust-item strong {

        font-size: 20px;
    }

    .fi-trust-item span {

        font-size: 8px;
    }
}



.fi-slide-visual {
    position: relative;
    height: 560px;

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


/* IMAGE SLIDER */

.fi-image-slider {
    position: relative;

    width: 610px;
    max-width: 100%;
    height: 460px;

    z-index: 4;
}


.fi-image-slide {
    position: absolute;

    inset: 0;

    opacity: 0;
    visibility: hidden;

    transform: scale(.96);

    transition:
        opacity .7s ease,
        transform .8s ease,
        visibility .7s ease;
}


.fi-image-slide.active {
    opacity: 1;
    visibility: visible;

    transform: scale(1);
}


/* IMAGE FRAME */

.fi-image-frame {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 35px;

    background: #fff;

    border: 8px solid rgba(255,255,255,.9);

    box-shadow:
        0 40px 90px rgba(5,55,110,.20),
        0 10px 30px rgba(5,55,110,.10);
}


.fi-image-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 1s ease;
}


.fi-image-slide.active
.fi-image-frame img {
    transform: scale(1.03);
}


/* PNG IMAGE */

.fi-image-slide:nth-child(3)
.fi-image-frame img {
    object-fit: contain;
    padding: 15px;
    background: #f7fbff;
}


/* SHINE */

.fi-image-shine {
    position: absolute;

    top: 0;
    left: -120%;

    width: 50%;
    height: 100%;

    z-index: 3;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );

    transform: skewX(-20deg);

    animation: fi-image-shine 6s infinite;
}


@keyframes fi-image-shine {

    0% {
        left: -120%;
    }

    40%,
    100% {
        left: 150%;
    }
}


/* IMAGE DOTS */

.fi-image-dots {
    position: absolute;

    left: 50%;
    bottom: 18px;

    transform: translateX(-50%);

    display: flex;

    gap: 7px;

    z-index: 20;
}


.fi-image-dots button {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 20px;

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

    cursor: pointer;

    transition: .35s;
}


.fi-image-dots button.active {
    width: 28px;

    background: #ffffff;

    box-shadow:
        0 0 10px rgba(255,255,255,.8);
}


/* MOBILE */

@media(max-width: 991px) {

    .fi-slide-visual {
        height: 430px;
    }

    .fi-image-slider {
        width: 500px;
        height: 380px;
    }
}


@media(max-width: 600px) {

    .fi-slide-visual {
        height: 330px;
    }

    .fi-image-slider {
        width: 100%;
        height: 285px;
    }

    .fi-image-frame {
        border-radius: 22px;
        border-width: 5px;
    }

    .fi-image-dots {
        bottom: 12px;
    }
}





/* ==================================top slider ================================== */


/* =========================================================
   SITE HEADER MENU - ADVANCED CSS
========================================================= */

#site-header-menu {
    position: relative;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e9eef4;
    z-index: 9999;
}


/* Main Header */

#site-header-menu .site-header-menu-inner {
    width: 100%;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 5px 25px rgba(20,55,90,.06);

    transition: all .3s ease;
}


/* Container */

#site-header-menu .container {
    max-width: 1400px;
}


/* Navigation */

#site-header-menu .site-navigation {
    min-height: 82px;
    gap: 25px;
}


/* =========================================================
   LOGO
========================================================= */

#site-header-menu .site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


#site-header-menu .home-link {
    display: flex;
    align-items: center;
}


#site-header-menu #logo-img {
    width: 200px;
    height: auto;
    max-height: 55px;

    object-fit: contain;

    transition: transform .3s ease;
}


#site-header-menu #logo-img:hover {
    transform: scale(1.03);
}


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

#site-header-menu .main-menu {
    margin-left: auto;
}


#site-header-menu .main-menu > ul.menu {
    display: flex;
    align-items: center;

    gap: 3px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* Menu Item */

#site-header-menu .main-menu > ul.menu > li {
    position: relative;
    list-style: none;
}


/* Menu Link */

#site-header-menu .main-menu > ul.menu > li > a {
    position: relative;

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

    min-height: 46px;

    padding: 0 15px;

    color: #183b5d !important;

    border-radius: 10px;

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

    text-decoration: none;

    white-space: nowrap;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}


/* Hover */

#site-header-menu .main-menu > ul.menu > li > a:hover {
    color: #087bea !important;

    background: #f2f8fd;

    transform: translateY(-1px);
}


/* Active */

#site-header-menu .main-menu > ul.menu > li.active > a {
    color: #087bea !important;

    background: #f1f7fc;
}


/* Active bottom line */

#site-header-menu .main-menu > ul.menu > li.active > a::after {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;
    bottom: 3px;

    height: 2px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #087bea,
        #18b9f5
    );
}


/* =========================================================
   IT SOLUTIONS ARROW
========================================================= */

#site-header-menu .mega-menu-link::after {
    content: "⌄";

    margin-left: 7px;

    color: #7c91a7;

    font-size: 13px;

    transition: transform .25s ease;
}


#site-header-menu li:hover > .mega-menu-link::after {
    color: #087bea;

    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN / MEGA SUBMENU
========================================================= */

#site-header-menu .mega-submenu {
    position: absolute;

    top: calc(100% + 12px);
    left: 50%;

    width: 310px;

    margin: 0;
    padding: 10px;

    list-style: none;

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

    border: 1px solid #e5edf5;

    border-radius: 16px;

    box-shadow:
        0 25px 60px rgba(20,60,100,.16);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(10px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

    z-index: 99999;
}


/* Dropdown arrow */

#site-header-menu .mega-submenu::before {
    content: "";

    position: absolute;

    top: -6px;
    left: 50%;

    width: 11px;
    height: 11px;

    background: #fff;

    border-left: 1px solid #e5edf5;
    border-top: 1px solid #e5edf5;

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* Show dropdown */

#site-header-menu li:hover > .mega-submenu {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* Dropdown items */

#site-header-menu .mega-submenu li {
    list-style: none;

    margin: 2px 0;
}


/* Dropdown links */

#site-header-menu .mega-submenu li a {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 42px;

    padding: 0 13px;

    border-radius: 9px;

    color: #385673;

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    transition: all .2s ease;
}


/* Small bullet */

#site-header-menu .mega-submenu li a::before {
    content: "";

    width: 5px;
    height: 5px;

    margin-right: 10px;

    border-radius: 50%;

    background: #b5c6d7;

    transition: all .2s ease;
}


/* Dropdown hover */

#site-header-menu .mega-submenu li a:hover {
    color: #087bea;

    background: #f3f8fd;

    padding-left: 18px;
}


#site-header-menu .mega-submenu li a:hover::before {
    background: #087bea;

    box-shadow:
        0 0 8px rgba(8,123,234,.5);
}


/* =========================================================
   GET FREE DEMO BUTTON
========================================================= */

#site-header-menu .main-menu > ul.menu > li:last-child > a {
    margin-left: 8px;

    min-height: 44px;

    padding: 0 20px;

    color: #ffffff !important;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #087bea,
            #12b4f4
        );

    box-shadow:
        0 10px 25px rgba(0,125,235,.20);

    transition: all .3s ease;
}


/* Demo hover */

#site-header-menu .main-menu > ul.menu > li:last-child > a:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #0569ca,
            #079fe0
        );

    transform: translateY(-2px);

    box-shadow:
        0 15px 30px rgba(0,125,235,.30);
}


/* Remove arrow from demo */

#site-header-menu .main-menu > ul.menu > li:last-child > a::after {
    display: none;
}


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

#site-header-menu .btn-show-menu-mobile {
    width: 44px;
    height: 44px;

    display: none;

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

    border-radius: 11px;

    background: #f2f7fb;

    border: 1px solid #e0eaf2;

    cursor: pointer;

    transition: .3s ease;
}


#site-header-menu .btn-show-menu-mobile:hover {
    background: #087bea;
}


/* Hamburger */

#site-header-menu .menubar-box {
    width: 22px;
}


#site-header-menu .menubar-inner,
#site-header-menu .menubar-inner::before,
#site-header-menu .menubar-inner::after {
    display: block;

    width: 22px;
    height: 2px;

    border-radius: 5px;

    background: #087bea;

    transition: .3s ease;
}


#site-header-menu .menubar-inner {
    position: relative;
}


#site-header-menu .menubar-inner::before,
#site-header-menu .menubar-inner::after {
    content: "";

    position: absolute;

    left: 0;
}


#site-header-menu .menubar-inner::before {
    top: -7px;
}


#site-header-menu .menubar-inner::after {
    top: 7px;
}


/* =========================================================
   STICKY HEADER
========================================================= */

#site-header-menu.is_stuck,
#site-header-menu .is_stuck {
    background: rgba(255,255,255,.97);

    backdrop-filter: blur(18px);

    box-shadow:
        0 8px 30px rgba(20,60,100,.10);
}


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

@media (max-width: 1150px) {

    #site-header-menu .main-menu > ul.menu > li > a {
        padding: 0 10px;

        font-size: 13px;
    }

    #site-header-menu .main-menu > ul.menu {
        gap: 1px;
    }

    #site-header-menu #logo-img {
        width: 175px;
    }

    #site-header-menu .site-navigation {
        gap: 12px;
    }
}


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

@media (max-width: 991px) {

    #site-header-menu .site-header-menu-inner {
        min-height: 72px;
    }

    #site-header-menu .site-navigation {
        min-height: 72px;
    }

    #site-header-menu #logo-img {
        width: 175px;
        max-height: 50px;
    }

    #site-header-menu .btn-show-menu-mobile {
        display: flex;
    }

    #site-header-menu .main-menu {
        display: none;
    }
}


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

@media (max-width: 480px) {

    #site-header-menu .site-header-menu-inner,
    #site-header-menu .site-navigation {
        min-height: 65px;
    }

    #site-header-menu #logo-img {
        width: 155px;
    }

    #site-header-menu .btn-show-menu-mobile {
        width: 40px;
        height: 40px;
    }
}



/* =========================================================
   FUTURE INFOSYS - CLEAN PROFESSIONAL HEADER
   ========================================================= */

#site-header-menu {
    position: relative;
    width: 100%;
    height: 78px;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 2px 15px rgba(20, 50, 80, 0.06);
    z-index: 9999;
}

/* Remove unwanted background layers */
#site-header-menu::before,
#site-header-menu::after,
#site-header-menu .cmt-bg-layer,
#site-header-menu .cmt-row-wrapper-bg-layer {
    display: none !important;
}

/* Header inner */
#site-header-menu .site-header-menu-inner {
    width: 100%;
    height: 78px;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* Container */
#site-header-menu .container {
    max-width: 1400px;
    height: 100%;
}

/* Main navigation row */
#site-header-menu .site-navigation {
    height: 78px;
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* =========================================================
   LOGO
   ========================================================= */

#site-header-menu .site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 100%;
}

#site-header-menu .home-link {
    display: flex;
    align-items: center;
    height: 100%;
}

#site-header-menu #logo-img {
    display: block;
    width: 165px !important;
    max-width: 165px !important;
    height: auto !important;
    max-height: 58px !important;
    object-fit: contain;
    margin: 0 !important;
}

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

#site-header-menu .main-menu {
    margin-left: auto;
    height: 100%;
    display: flex;
    align-items: center;
}

#site-header-menu .main-menu > ul.menu {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Main menu items */
#site-header-menu .main-menu > ul.menu > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    list-style: none;
}

/* Main links */
#site-header-menu .main-menu > ul.menu > li > a {
    position: relative;

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

    height: 42px;
    min-height: 42px;

    padding: 0 15px;

    color: #24496b !important;

    background: transparent !important;

    border-radius: 8px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    line-height: 1;

    text-decoration: none !important;

    white-space: nowrap;

    transition:
        color .25s ease,
        background .25s ease;
}

/* Hover */
#site-header-menu .main-menu > ul.menu > li > a:hover {
    color: #087bea !important;
    background: #f5f9fd !important;
    transform: none !important;
}

/* =========================================================
   ACTIVE HOME
   ========================================================= */

#site-header-menu .main-menu > ul.menu > li.active > a {
    color: #087bea !important;
    background: #f5f9fd !important;
}

/* Small active line */
#site-header-menu .main-menu > ul.menu > li.active > a::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 2px;

    width: 22px;
    height: 2px;

    border-radius: 10px;

    background: #087bea;

    transform: translateX(-50%);
}

/* Remove theme active line */
#site-header-menu .main-menu > ul.menu > li.active > a::after {
    display: none !important;
}

/* =========================================================
   DROPDOWN ARROW
   ========================================================= */

#site-header-menu .mega-menu-link::after {
    content: "⌄";

    display: inline-flex;

    margin-left: 7px;

    color: #71879c;

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

    line-height: 1;

    transition: transform .25s ease;
}

#site-header-menu li:hover > .mega-menu-link::after {
    color: #087bea;
    transform: translateY(2px);
}

/* =========================================================
   DROPDOWN
   ========================================================= */

#site-header-menu .mega-submenu {
    position: absolute;

    top: calc(100% + 5px);
    left: 50%;

    width: 300px;

    margin: 0;
    padding: 8px;

    list-style: none;

    background: #ffffff;

    border: 1px solid #e7edf3;
    border-radius: 12px;

    box-shadow:
        0 18px 45px rgba(20, 55, 90, 0.13);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(-50%) translateY(8px);

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;

    z-index: 99999;
}

/* Dropdown arrow */
#site-header-menu .mega-submenu::before {
    content: "";

    position: absolute;

    top: -6px;
    left: 50%;

    width: 10px;
    height: 10px;

    background: #ffffff;

    border-left: 1px solid #e7edf3;
    border-top: 1px solid #e7edf3;

    transform: translateX(-50%) rotate(45deg);
}

/* Show dropdown */
#site-header-menu li:hover > .mega-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(-50%) translateY(0);
}

/* Dropdown item */
#site-header-menu .mega-submenu li {
    margin: 2px 0;
    padding: 0;
    list-style: none;
}

/* Dropdown link */
#site-header-menu .mega-submenu li a {
    display: flex;
    align-items: center;

    min-height: 40px;

    padding: 0 12px;

    color: #405b73 !important;

    background: transparent;

    border-radius: 7px;

    font-size: 13px;
    font-weight: 500;

    text-decoration: none !important;

    transition:
        color .2s ease,
        background .2s ease,
        padding .2s ease;
}

/* Dot */
#site-header-menu .mega-submenu li a::before {
    content: "";

    width: 5px;
    height: 5px;

    margin-right: 10px;

    border-radius: 50%;

    background: #b8c8d6;

    flex-shrink: 0;

    transition: background .2s ease;
}

/* Dropdown hover */
#site-header-menu .mega-submenu li a:hover {
    color: #087bea !important;
    background: #f4f8fc;

    padding-left: 16px;
}

#site-header-menu .mega-submenu li a:hover::before {
    background: #087bea;
}

/* =========================================================
   GET FREE DEMO BUTTON
   ========================================================= */

#site-header-menu .main-menu > ul.menu > li:last-child > a {
    height: 44px;
    min-height: 44px;

    margin-left: 12px;

    padding: 0 21px;

    color: #ffffff !important;

    background: #087bea !important;

    border: 1px solid #087bea;

    border-radius: 7px;

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

    box-shadow: 0 7px 18px rgba(8, 123, 234, 0.20);

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

/* Button hover */
#site-header-menu .main-menu > ul.menu > li:last-child > a:hover {
    color: #ffffff !important;

    background: #056bcf !important;

    box-shadow: 0 10px 24px rgba(8, 123, 234, 0.28);

    transform: translateY(-1px);
}

/* Remove active line/button arrow */
#site-header-menu .main-menu > ul.menu > li:last-child > a::before,
#site-header-menu .main-menu > ul.menu > li:last-child > a::after {
    display: none !important;
}

/* =========================================================
   STICKY HEADER
   ========================================================= */

#site-header-menu.cmt-stickable-header.is_stuck,
#site-header-menu.is_stuck,
#site-header-menu .is_stuck {
    background: #ffffff !important;

    box-shadow:
        0 5px 20px rgba(20, 50, 80, 0.10);

    backdrop-filter: none !important;
}

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

#site-header-menu .btn-show-menu-mobile {
    width: 42px;
    height: 42px;

    display: none;

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

    margin-left: auto;

    background: #f5f9fd;

    border: 1px solid #e2ebf3;

    border-radius: 8px;

    cursor: pointer;
}

/* Hamburger */
#site-header-menu .menubar-box {
    width: 20px;
}

#site-header-menu .menubar-inner,
#site-header-menu .menubar-inner::before,
#site-header-menu .menubar-inner::after {
    display: block;

    width: 20px;
    height: 2px;

    background: #087bea;

    border-radius: 5px;

    transition: .25s ease;
}

#site-header-menu .menubar-inner {
    position: relative;
}

#site-header-menu .menubar-inner::before,
#site-header-menu .menubar-inner::after {
    content: "";

    position: absolute;
    left: 0;
}

#site-header-menu .menubar-inner::before {
    top: -6px;
}

#site-header-menu .menubar-inner::after {
    top: 6px;
}

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

@media (max-width: 1150px) {

    #site-header-menu .main-menu > ul.menu > li > a {
        padding: 0 10px;
        font-size: 13px;
    }

    #site-header-menu #logo-img {
        width: 150px !important;
        max-width: 150px !important;
    }

    #site-header-menu .main-menu > ul.menu > li:last-child > a {
        margin-left: 7px;
        padding: 0 15px;
    }
}

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

@media (max-width: 991px) {

    #site-header-menu {
        height: 70px;
    }

    #site-header-menu .site-header-menu-inner {
        height: 70px;
    }

    #site-header-menu .site-navigation {
        height: 70px;
        min-height: 70px;
    }

    #site-header-menu #logo-img {
        width: 150px !important;
        max-width: 150px !important;
    }

    #site-header-menu .btn-show-menu-mobile {
        display: flex !important;
    }

    #site-header-menu .main-menu {
        display: none;
    }
}

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

@media (max-width: 480px) {

    #site-header-menu {
        height: 65px;
    }

    #site-header-menu .site-header-menu-inner,
    #site-header-menu .site-navigation {
        height: 65px;
        min-height: 65px;
    }

    #site-header-menu #logo-img {
        width: 135px !important;
        max-width: 135px !important;
    }

    #site-header-menu .btn-show-menu-mobile {
        width: 40px;
        height: 40px;
    }
}

#site-header-menu {
    margin-top: 20px !important;
}


#site-header-menu .main-menu > ul.menu > li:last-child > a {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
}

#site-header-menu .main-menu > ul.menu > li.active > a,
#site-header-menu .main-menu > ul.menu > li > a:hover {
    background: transparent !important;
}

#site-header-menu .main-menu > ul.menu > li.active > a::before {
    display: none !important;
}


/* =========================================
   SIMPLE SLIDER - COMPACT PROFESSIONAL
========================================= */

.simple-slider {
    position: relative;
    width: 100%;
    min-height: 500px;
    overflow: hidden;
}

.simple-slide {
    width: 100%;
    min-height: 500px;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 55px 7%;
    box-sizing: border-box;
}

.simple-slide.active {
    display: flex;
}


/* =========================================
   LEFT CONTENT
========================================= */

.simple-content {
    flex: 1;
    max-width: 600px;
    min-width: 0;
}

.simple-label {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.simple-content h1,
.simple-content h2 {
    margin: 0 0 16px;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
}

.simple-content h1 span,
.simple-content h2 span {
    display: block;
}

.simple-content p {
    margin: 0 0 24px;
    max-width: 560px;
    font-size: 15px;
    line-height: 1.7;
}


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

.simple-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.simple-btn,
.simple-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}


/* =========================================
   RIGHT IMAGE
========================================= */

.simple-image {
    flex: 0 0 44%;
    max-width: 520px;
    text-align: center;
}

.simple-image img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    max-height: 390px;
    object-fit: contain;
}


/* =========================================
   ARROWS
========================================= */

.simple-prev,
.simple-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 18px;
}

.simple-prev {
    left: 18px;
}

.simple-next {
    right: 18px;
}


/* =========================================
   DOTS
========================================= */

.simple-dots {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 10;
}

.simple-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.simple-dots button.active {
    width: 22px;
    border-radius: 10px;
}


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

@media (max-width: 991px) {

    .simple-slide {
        gap: 25px;
        padding: 45px 6%;
    }

    .simple-content h1,
    .simple-content h2 {
        font-size: 34px;
    }

    .simple-content p {
        font-size: 14px;
    }

    .simple-image {
        flex-basis: 43%;
    }
}


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

@media (max-width: 767px) {

    .simple-slider {
        min-height: auto;
    }

    .simple-slide {
        min-height: auto;
        padding: 45px 35px 70px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 25px;
    }

    .simple-content {
        width: 100%;
        max-width: 100%;
    }

    .simple-label {
        font-size: 10px;
        margin-bottom: 10px;
    }

    .simple-content h1,
    .simple-content h2 {
        font-size: 28px;
        line-height: 1.2;
        margin-bottom: 14px;
    }

    .simple-content p {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .simple-buttons {
        justify-content: center;
    }

    .simple-btn,
    .simple-btn-outline {
        min-height: 38px;
        padding: 0 14px;
        font-size: 11px;
    }

    .simple-image {
        width: 85%;
        flex: none;
    }

    .simple-image img {
        max-height: 230px;
    }

    .simple-prev {
        left: 8px;
    }

    .simple-next {
        right: 8px;
    }

}
/* 
=======================================call Now css ============================= */


/* =========================================================
   ADVANCED CALL / WHATSAPP FLOATING BUTTON
   ========================================================= */

#toggleButton {
    position: fixed;
    right: 28px;
    bottom: 28px;

    width: 145px;
    height: 52px;

    border: 0;
    outline: none;

    border-radius: 50px;

    background: linear-gradient(
        135deg,
        #087bea 0%,
        #08a9ed 55%,
        #12c7f3 100%
    );

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;

    cursor: pointer;

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

    z-index: 99999;

    box-shadow:
        0 12px 30px rgba(8, 123, 234, .28),
        0 4px 10px rgba(0, 0, 0, .08);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        width .3s ease;
}


/* =========================================================
   OUTER PULSE RING
   ========================================================= */

#toggleButton::before {
    content: "";

    position: absolute;

    inset: -7px;

    border: 1px solid rgba(8, 123, 234, .35);

    border-radius: inherit;

    animation: callPulse 2s infinite;

    pointer-events: none;
}

@keyframes callPulse {

    0% {
        transform: scale(1);
        opacity: .75;
    }

    70% {
        transform: scale(1.08);
        opacity: 0;
    }

    100% {
        transform: scale(1.08);
        opacity: 0;
    }
}


/* =========================================================
   INNER LIGHT EFFECT
   ========================================================= */

#toggleButton::after {
    content: "";

    position: absolute;

    top: 0;
    left: -80px;

    width: 55px;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform: skewX(-20deg);

    animation: buttonShine 4s infinite;

    pointer-events: none;
}

@keyframes buttonShine {

    0% {
        left: -80px;
    }

    25% {
        left: 170px;
    }

    100% {
        left: 170px;
    }
}


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

#toggleButton .blink {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 8px;
}


/* Phone icon using CSS */
#toggleButton .blink::before {
    content: "☎";

    width: 22px;
    height: 22px;

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

    font-size: 14px;

    color: #087bea;

    background: #ffffff;

    border-radius: 50%;
}


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

#toggleButton:hover {

    transform: translateY(-4px) scale(1.03);

    box-shadow:
        0 18px 40px rgba(8, 123, 234, .35),
        0 5px 12px rgba(0, 0, 0, .10);
}


#toggleButton:active {
    transform: translateY(-1px) scale(.98);
}


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

#buttonContainer {

    position: fixed;

    right: 30px;
    bottom: 92px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    z-index: 99998;
}


/* =========================================================
   CALL / WHATSAPP ICON BUTTONS
   ========================================================= */

#buttonContainer a {

    position: relative;

    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    text-decoration: none;

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

    border: 1px solid rgba(255,255,255,.8);

    box-shadow:
        0 10px 28px rgba(20,60,100,.18);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


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

#buttonContainer .callbackfuncation::before {

    content: "☎";

    width: 30px;
    height: 30px;

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

    border-radius: 50%;

    background: #087bea;

    color: #ffffff;

    font-size: 15px;

    box-shadow:
        0 5px 14px rgba(8,123,234,.30);
}


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

#buttonContainer .whatsapp::before {

    content: "◉";

    width: 30px;
    height: 30px;

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

    border-radius: 50%;

    background: #25d366;

    color: #ffffff;

    font-size: 14px;

    box-shadow:
        0 5px 14px rgba(37,211,102,.30);
}


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

#buttonContainer a:hover {

    transform: translateY(-4px) scale(1.08);

    box-shadow:
        0 15px 35px rgba(20,60,100,.25);
}


/* =========================================================
   TOOLTIP
   ========================================================= */

#buttonContainer .callbackfuncation::after {

    content: "Call us";

    position: absolute;

    right: 65px;
    top: 50%;

    transform: translateY(-50%) translateX(5px);

    padding: 7px 11px;

    border-radius: 7px;

    background: #173d60;

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    transition: .25s ease;
}


#buttonContainer .callbackfuncation:hover::after {

    opacity: 1;
    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);
}


/* WhatsApp tooltip */

#buttonContainer #whatsappMobile::after {

    content: "WhatsApp";

    position: absolute;

    right: 65px;
    top: 50%;

    transform: translateY(-50%) translateX(5px);

    padding: 7px 11px;

    border-radius: 7px;

    background: #173d60;

    color: #ffffff;

    font-size: 11px;
    font-weight: 600;

    white-space: nowrap;

    opacity: 0;
    visibility: hidden;

    transition: .25s ease;
}


#buttonContainer #whatsappMobile:hover::after {

    opacity: 1;
    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);
}


/* =========================================================
   HIDDEN STATE
   ========================================================= */

#buttonContainer.hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(15px) scale(.9);

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s ease;
}


/* =========================================================
   OPEN STATE
   ========================================================= */

#buttonContainer:not(.hidden) {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0) scale(1);

    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s ease;
}


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

@media (max-width: 767px) {

    #toggleButton {

        right: 18px;
        bottom: 18px;

        width: 135px;
        height: 48px;

        font-size: 13px;
    }

    #buttonContainer {

        right: 20px;
        bottom: 78px;

        gap: 10px;
    }

    #buttonContainer a {

        width: 48px;
        height: 48px;
    }

    #buttonContainer .callbackfuncation::before,
    #buttonContainer .whatsapp::before {

        width: 28px;
        height: 28px;
    }

}


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

@media (max-width: 480px) {

    #toggleButton {

        right: 14px;
        bottom: 14px;

        width: 125px;
        height: 46px;

        font-size: 12px;
    }

    #buttonContainer {

        right: 16px;
        bottom: 72px;
    }

    #buttonContainer a {

        width: 45px;
        height: 45px;
    }

}



/* =========================abouts us css ============================== */



/* =========================================================
   FUTURE INFOSYS - LIGHT PREMIUM ABOUT BANNER
   White + Soft Blue + Dot Pattern
========================================================= */

.fi-about-banner {
    position: relative;
    width: 100%;
    min-height: 430px;

    display: flex;
    align-items: center;

    overflow: hidden;

    /* LIGHT PREMIUM BACKGROUND */
    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(37, 117, 210, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(37, 117, 210, 0.07),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7faff 50%,
            #eef5fc 100%
        );

    color: #17324d;
}


/* =========================================================
   SMALL DOT PATTERN
========================================================= */

.fi-about-banner::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    background-image:
        radial-gradient(
            rgba(37, 117, 210, 0.16) 1px,
            transparent 1px
        );

    background-size: 8px 8px;

    opacity: 0.55;

    pointer-events: none;
}


/* =========================================================
   SOFT RIGHT GLOW
========================================================= */

.fi-about-banner::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -220px;
    top: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(35, 117, 211, 0.13),
            rgba(35, 117, 211, 0.03) 55%,
            transparent 72%
        );

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.fi-about-container {
    position: relative;
    z-index: 5;

    width: 90%;
    max-width: 1180px;

    min-height: 430px;

    margin: 10px auto 0;

    display: flex;
    align-items: center;

    justify-content: space-between;
}


/* =========================================================
   CONTENT
========================================================= */

.fi-about-content {
    position: relative;
    z-index: 10;

    width: 55%;

    padding-top: 5px;
}


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

.fi-about-badge {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 9px 16px;

    margin-bottom: 20px;

    border: 1px solid rgba(35, 117, 211, 0.15);

    border-radius: 25px;

    background: rgba(255, 255, 255, 0.72);

    box-shadow:
        0 8px 25px rgba(31, 91, 150, 0.07);

    color: #315776;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


/* Orange dot */

.fi-badge-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ff6333;

    box-shadow:
        0 0 0 4px rgba(255, 99, 51, 0.10);
}


/* =========================================================
   HEADING
========================================================= */

.fi-about-content h1 {
    margin: 0;

    color: #172f46;

    font-size: 58px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -2.3px;
}


/* Highlight */

.fi-about-content h1 strong {
    color: #1976d2;

    font-weight: 700;
}


/* =========================================================
   UNDERLINE
========================================================= */

.fi-about-underline {
    width: 65px;
    height: 4px;

    margin-top: 20px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #1976d2,
            #54a4ee
        );

    box-shadow:
        0 5px 15px rgba(25, 118, 210, 0.18);
}


/* =========================================================
   SUBTITLE
========================================================= */

.fi-about-content > p {
    margin: 16px 0 0;

    color: #647b91;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   RIGHT CURVE
========================================================= */

.fi-about-bg-right {
    position: absolute;

    width: 470px;
    height: 650px;

    right: -250px;
    top: -110px;

    border-radius: 50%;

    background:
        rgba(35, 117, 211, 0.035);

    border: 1px solid rgba(35, 117, 211, 0.08);

    transform: rotate(25deg);

    z-index: 1;
}


.fi-about-bg-right::before {
    content: "";

    position: absolute;

    width: 390px;
    height: 560px;

    left: 35px;
    top: 45px;

    border-radius: 50%;

    border: 1px solid rgba(35, 117, 211, 0.07);
}


/* =========================================================
   LEFT SOFT SHAPE
========================================================= */

.fi-about-bg-left {
    position: absolute;

    width: 350px;
    height: 500px;

    left: -240px;
    top: -100px;

    border-radius: 50%;

    background:
        rgba(35, 117, 211, 0.025);

    border: 1px solid rgba(35, 117, 211, 0.045);

    transform: rotate(-20deg);

    z-index: 1;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.fi-about-breadcrumb {
    position: absolute;

    right: 0;
    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 18px;

    border: 1px solid rgba(35, 117, 211, 0.12);

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.78);

    backdrop-filter: blur(10px);

    box-shadow:
        0 12px 30px rgba(31, 91, 150, 0.08);
}


.fi-about-breadcrumb a {
    color: #45637d;

    font-size: 10px;

    font-weight: 600;

    text-decoration: none;
}


.fi-about-breadcrumb a i {
    color: #1976d2;

    font-size: 9px;
}


.fi-about-breadcrumb > span {
    color: #9aabba;

    font-size: 9px;
}


.fi-about-breadcrumb strong {
    color: #1976d2;

    font-size: 10px;

    font-weight: 600;
}


@media (max-width: 767px) {

    .fi-about-banner {
        min-height: 340px;
    }

    .fi-about-container {
        min-height: 340px;
        margin-top: 10px;
    }

    .fi-about-content {
        width: 100%;
        padding-top: 45px;
    }

    .fi-about-content h1 {
        font-size: 44px;
        letter-spacing: -1.5px;
    }

    .fi-about-content > p {
        font-size: 12px;
        max-width: 330px;
    }

    .fi-about-visual {
        display: none;
    }

    .fi-about-breadcrumb {
        left: 0;
        right: auto;
        bottom: 25px;
        top: auto;
        transform: none;
    }
}




/* =========================================================
   FUTURE INFOSYS
   COURIER / CARGO / LOGISTICS ABOUT SECTION
========================================================= */

.fi-logistics-about {
    position: relative;
    overflow: hidden;

    padding: 90px 0;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(28, 111, 190, .07),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7faff 50%,
            #edf5fc 100%
        );
}


.fi-logistics-about::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(35, 115, 190, .12) 1px,
            transparent 1px
        );

    background-size: 9px 9px;

    opacity: .35;

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.fi-logistics-container {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1180px;

    margin: auto;
}


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

.fi-logistics-header {
    max-width: 820px;

    margin-bottom: 55px;
}


.fi-logistics-label {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #2478c5;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


.fi-logistics-label span {
    width: 30px;
    height: 2px;

    background: #2478c5;

    border-radius: 10px;
}


.fi-logistics-header h2 {
    margin: 0 0 18px;

    color: #17324a;

    font-size: 40px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -1px;
}


.fi-logistics-header h2 strong {
    display: block;

    color: #2478c5;
}


.fi-logistics-header > p {
    max-width: 760px;

    margin: 0;

    color: #687f93;

    font-size: 14px;

    line-height: 1.85;
}


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

.fi-logistics-main {
    display: grid;

    grid-template-columns: 1fr .9fr;

    gap: 70px;

    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.fi-logistics-overline {
    display: block;

    margin-bottom: 12px;

    color: #2478c5;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.fi-logistics-content h3 {
    margin: 0 0 22px;

    color: #18334a;

    font-size: 31px;

    line-height: 1.2;

    font-weight: 700;
}


.fi-logistics-content h3 span {
    display: block;

    color: #2478c5;
}


.fi-logistics-content > p {
    margin: 0 0 17px;

    color: #667d90;

    font-size: 14px;

    line-height: 1.85;
}


.fi-logistics-content > p strong {
    color: #244762;
}


/* =========================================================
   COMMITMENT
========================================================= */

.fi-logistics-commitment {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 28px;

    padding: 17px;

    border: 1px solid rgba(36,120,197,.12);

    border-radius: 10px;

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

    box-shadow:
        0 10px 30px rgba(30,70,110,.05);
}


.fi-commitment-icon {
    flex: 0 0 43px;

    width: 43px;
    height: 43px;

    display: flex;

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

    border-radius: 9px;

    background: #e9f4fd;

    color: #2478c5;
}


.fi-logistics-commitment strong {
    display: block;

    margin-bottom: 4px;

    color: #29455d;

    font-size: 13px;
}


.fi-logistics-commitment span {
    color: #778b9d;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   MODULE CARD
========================================================= */

.fi-logistics-module {
    position: relative;
}


.fi-module-card {
    position: relative;

    padding: 30px;

    overflow: hidden;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #0b2945,
            #09233c
        );

    box-shadow:
        0 25px 55px rgba(12,45,75,.17);
}


.fi-module-card::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -130px;
    top: -130px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.07);
}


.fi-module-top {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    padding-bottom: 23px;

    border-bottom: 1px solid rgba(255,255,255,.10);
}


.fi-module-top span {
    display: block;

    margin-bottom: 8px;

    color: #6db3ed;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.7px;
}


.fi-module-top h3 {
    margin: 0;

    color: #ffffff;

    font-size: 20px;

    font-weight: 600;
}


.fi-module-icon {
    width: 46px;
    height: 46px;

    display: flex;

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

    border-radius: 9px;

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

    color: #ffffff;

    font-size: 16px;
}


/* =========================================================
   MODULE LIST
========================================================= */

.fi-module-list {
    padding: 15px 0 8px;
}


.fi-module-list > div {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 11px 0;

    border-bottom: 1px solid rgba(255,255,255,.055);
}


.fi-module-list > div:last-child {
    border-bottom: none;
}


.fi-module-list i {
    width: 27px;
    height: 27px;

    display: flex;

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

    border-radius: 6px;

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

    color: #75b9ed;

    font-size: 10px;
}


.fi-module-list span {
    color: #c0d1df;

    font-size: 11px;

    font-weight: 500;
}


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

.fi-module-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 12px;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,.10);
}


.fi-module-footer span {
    color: #6da9d8;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


.fi-module-footer strong {
    color: #ffffff;

    font-size: 10px;

    font-weight: 600;
}


/* =========================================================
   CORE MODULES
========================================================= */

.fi-logistics-modules {
    margin-top: 75px;

    padding-top: 45px;

    border-top: 1px solid rgba(30,80,120,.09);
}


.fi-module-heading {
    margin-bottom: 27px;
}


.fi-module-heading > span {
    display: block;

    margin-bottom: 7px;

    color: #2478c5;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.fi-module-heading h3 {
    margin: 0;

    color: #1c3850;

    font-size: 25px;

    font-weight: 700;
}


.fi-module-grid {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 13px;
}


.fi-module-item {
    position: relative;

    padding: 20px;

    border: 1px solid rgba(30,80,120,.08);

    border-radius: 10px;

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

    box-shadow:
        0 7px 22px rgba(30,70,110,.035);

    transition: .3s ease;
}


.fi-module-item:hover {
    transform: translateY(-4px);

    border-color: rgba(36,120,197,.20);

    box-shadow:
        0 15px 35px rgba(30,70,110,.08);
}


.fi-module-item i {
    display: flex;

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

    width: 40px;
    height: 40px;

    margin-bottom: 13px;

    border-radius: 8px;

    background: #eaf4fd;

    color: #2478c5;

    font-size: 14px;
}


.fi-module-item strong {
    display: block;

    margin-bottom: 5px;

    color: #29455d;

    font-size: 13px;
}


.fi-module-item span {
    display: block;

    color: #788c9e;

    font-size: 11px;

    line-height: 1.55;
}


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

.fi-logistics-cta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 55px;

    padding: 28px 32px;

    border-radius: 12px;

    background:
        linear-gradient(
            100deg,
            #102f4c,
            #0b263f
        );
}


.fi-logistics-cta > div > span {
    display: block;

    margin-bottom: 7px;

    color: #72b8ec;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.fi-logistics-cta h3 {
    margin: 0;

    color: #ffffff;

    font-size: 22px;

    line-height: 1.35;

    font-weight: 600;
}


.fi-logistics-cta h3 strong {
    color: #72b8ec;
}


.fi-logistics-cta > a {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 12px 18px;

    border-radius: 6px;

    background: #ffffff;

    color: #16324a;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    transition: .3s ease;
}


.fi-logistics-cta > a:hover {
    transform: translateY(-2px);

    background: #eaf4fd;
}


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

@media (max-width: 991px) {

    .fi-logistics-main {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .fi-module-grid {
        grid-template-columns: repeat(2,1fr);
    }

}


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

@media (max-width: 767px) {

    .fi-logistics-about {
        padding: 55px 0;
    }

    .fi-logistics-container {
        width: 92%;
    }

    .fi-logistics-header h2 {
        font-size: 29px;
    }

    .fi-logistics-content h3 {
        font-size: 26px;
    }

    .fi-logistics-content > p {
        font-size: 13px;
    }

    .fi-module-grid {
        grid-template-columns: 1fr;
    }

    .fi-module-card {
        padding: 23px;
    }

    .fi-logistics-cta {
        flex-direction: column;

        align-items: flex-start;
    }

}


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

@media (max-width: 480px) {

    .fi-logistics-header h2 {
        font-size: 26px;
    }

    .fi-logistics-content h3 {
        font-size: 23px;
    }

    .fi-module-top h3 {
        font-size: 17px;
    }

    .fi-founded-year {
        font-size: 52px;
    }

}


/* =========================================================
   FUTURE INFOSYS
   PREMIUM LOGISTICS ABOUT SECTION
========================================================= */

.fi-logistics-about {
    position: relative;
    overflow: hidden;

    padding: 95px 0 80px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(31,118,201,.09),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbfe 55%,
            #eef5fb 100%
        );
}


/* Dots */

.fi-logistics-about::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(28,112,194,.13) 1px,
            transparent 1px
        );

    background-size: 9px 9px;

    opacity: .4;

    pointer-events: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.fi-logistics-about-container {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 1180px;

    margin: 0 auto;
}


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

.fi-logistics-heading {
    max-width: 800px;

    margin-bottom: 60px;
}


.fi-logistics-eyebrow {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: #2678c2;

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

    letter-spacing: 2px;
}


.fi-logistics-eyebrow span {
    width: 32px;
    height: 2px;

    border-radius: 10px;

    background: #2678c2;
}


.fi-logistics-heading h2 {
    margin: 0 0 18px;

    color: #17334b;

    font-size: 43px;

    line-height: 1.18;

    font-weight: 700;

    letter-spacing: -1.5px;
}


.fi-logistics-heading h2 strong {
    display: block;

    color: #2678c2;

    font-weight: 700;
}


.fi-logistics-heading > p {
    max-width: 700px;

    margin: 0;

    color: #6d8192;

    font-size: 14px;

    line-height: 1.85;
}


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

.fi-logistics-about-main {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 65px;

    align-items: center;
}


/* =========================================================
   STORY
========================================================= */

.fi-logistics-story {
    display: flex;

    gap: 22px;

    align-items: flex-start;
}


.fi-story-number {
    flex: 0 0 72px;

    padding-top: 3px;

    border-right: 1px solid rgba(38,120,194,.15);
}


.fi-story-number span {
    display: block;

    color: #2678c2;

    font-size: 25px;

    font-weight: 700;

    letter-spacing: -1px;
}


.fi-story-number small {
    display: block;

    margin-top: 5px;

    color: #9aabb9;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.fi-story-content {
    flex: 1;
}


.fi-story-label {
    display: block;

    margin-bottom: 10px;

    color: #2678c2;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.fi-story-content h3 {
    margin: 0 0 20px;

    color: #1b374f;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 700;
}


.fi-story-content h3 strong {
    display: block;

    color: #2678c2;
}


.fi-story-content p {
    margin: 0 0 16px;

    color: #687e90;

    font-size: 13px;

    line-height: 1.85;
}


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

.fi-logistics-about-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 10px;

    padding: 12px 17px;

    border-radius: 6px;

    background: #173b5c;

    color: #ffffff;

    font-size: 10px;

    font-weight: 700;

    text-decoration: none;

    transition: .3s ease;
}


.fi-logistics-about-btn i {
    font-size: 9px;

    transition: .3s ease;
}


.fi-logistics-about-btn:hover {
    background: #2678c2;

    color: #ffffff;

    transform: translateY(-2px);
}


.fi-logistics-about-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   LOGISTICS VISUAL
========================================================= */

.fi-logistics-visual {
    position: relative;

    height: 400px;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #092641 0%,
            #0c3150 50%,
            #09253e 100%
        );

    box-shadow:
        0 25px 60px rgba(9,42,69,.18);
}


/* Background dots */

.fi-logistics-visual::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(255,255,255,.14) 1px,
            transparent 1px
        );

    background-size: 12px 12px;

    opacity: .13;
}


/* Background circle */

.fi-logistics-visual-bg {
    position: absolute;

    width: 390px;
    height: 390px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.09);

    box-shadow:
        0 0 0 45px rgba(255,255,255,.018),
        0 0 0 90px rgba(255,255,255,.012);
}


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

.fi-logistics-visual-title {
    position: absolute;

    left: 28px;
    top: 25px;

    z-index: 4;
}


.fi-logistics-visual-title span {
    display: block;

    margin-bottom: 5px;

    color: #72b7e9;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.fi-logistics-visual-title strong {
    color: #ffffff;

    font-size: 17px;

    font-weight: 600;
}


/* =========================================================
   CENTER
========================================================= */

.fi-logistics-center {
    position: absolute;

    z-index: 10;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 115px;
    height: 115px;

    display: flex;

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

    flex-direction: column;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #1678df,
            #1260ba
        );

    border: 5px solid rgba(255,255,255,.10);

    box-shadow:
        0 15px 40px rgba(0,0,0,.28),
        0 0 0 12px rgba(34,123,218,.10);
}


.fi-center-icon {
    margin-bottom: 7px;

    color: #ffffff;

    font-size: 25px;
}


.fi-logistics-center strong {
    color: #ffffff;

    font-size: 10px;

    letter-spacing: 1px;
}


.fi-logistics-center > span {
    color: rgba(255,255,255,.62);

    font-size: 7px;

    letter-spacing: 1.2px;
}


/* =========================================================
   NODES
========================================================= */

.fi-logistics-node {
    position: absolute;

    z-index: 12;

    width: 65px;
    height: 65px;

    display: flex;

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

    flex-direction: column;

    border-radius: 12px;

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

    border: 1px solid rgba(255,255,255,.13);

    backdrop-filter: blur(8px);

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

    transition: .3s ease;
}


.fi-logistics-node:hover {
    transform: translateY(-5px);

    background: rgba(255,255,255,.12);
}


.fi-logistics-node i {
    margin-bottom: 6px;

    color: #7fc2ef;

    font-size: 15px;
}


.fi-logistics-node span {
    color: #d3e2ee;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .8px;
}


/* Positions */

.node-booking {
    left: 65px;
    top: 100px;
}


.node-tracking {
    right: 65px;
    top: 100px;
}


.node-delivery {
    right: 40px;
    bottom: 65px;
}


.node-api {
    left: 45px;
    bottom: 65px;
}


.node-billing {
    left: 50%;
    bottom: 25px;

    transform: translateX(-50%);
}


.node-report {
    left: 50%;
    top: 65px;

    transform: translateX(-50%);
}


/* =========================================================
   CONNECTION LINES
========================================================= */

.fi-connect {
    position: absolute;

    z-index: 3;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(103,181,235,.65),
            transparent
        );

    transform-origin: left center;
}


.connect-one {
    width: 130px;

    left: 112px;
    top: 145px;

    transform: rotate(25deg);
}


.connect-two {
    width: 130px;

    right: 112px;
    top: 145px;

    transform: rotate(155deg);
}


.connect-three {
    width: 120px;

    right: 95px;
    bottom: 110px;

    transform: rotate(-155deg);
}


.connect-four {
    width: 120px;

    left: 95px;
    bottom: 110px;

    transform: rotate(-25deg);
}


.connect-five {
    width: 110px;

    left: 50%;
    bottom: 85px;

    transform: translateX(-50%) rotate(90deg);
}


.connect-six {
    width: 90px;

    left: 50%;
    top: 105px;

    transform: translateX(-50%) rotate(90deg);
}


/* =========================================================
   CAPABILITIES
========================================================= */

.fi-logistics-capabilities {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 13px;

    margin-top: 35px;
}


.fi-capability {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 18px;

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

    border: 1px solid rgba(25,82,125,.08);

    border-radius: 9px;

    box-shadow:
        0 8px 25px rgba(30,70,110,.04);

    transition: .3s ease;
}


.fi-capability:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(30,70,110,.08);
}


.fi-capability-icon {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 8px;

    background: #eaf4fd;

    color: #2678c2;

    font-size: 13px;
}


.fi-capability-icon.orange {
    background: #fff0e9;
    color: #e87532;
}


.fi-capability-icon.green {
    background: #e9f8f0;
    color: #269966;
}


.fi-capability-icon.purple {
    background: #f1ecff;
    color: #7955bd;
}


.fi-capability strong {
    display: block;

    margin-bottom: 4px;

    color: #29455d;

    font-size: 11px;
}


.fi-capability span {
    display: block;

    color: #7b8f9f;

    font-size: 9px;

    line-height: 1.5;
}


/* =========================================================
   STATEMENT
========================================================= */

.fi-logistics-statement {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top: 45px;
}


.fi-statement-line {
    width: 70px;
    height: 1px;

    background: rgba(36,120,197,.16);
}


.fi-logistics-statement p {
    margin: 0;

    color: #8294a3;

    font-size: 11px;

    text-align: center;
}


.fi-logistics-statement strong {
    color: #2678c2;
}


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

@media (max-width: 991px) {

    .fi-logistics-heading h2 {
        font-size: 36px;
    }

    .fi-logistics-about-main {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .fi-logistics-capabilities {
        grid-template-columns: repeat(2,1fr);
    }

}


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

@media (max-width: 767px) {

    .fi-logistics-about {
        padding: 60px 0;
    }

    .fi-logistics-about-container {
        width: 92%;
    }

    .fi-logistics-heading {
        margin-bottom: 40px;
    }

    .fi-logistics-heading h2 {
        font-size: 29px;
    }

    .fi-logistics-heading > p {
        font-size: 13px;
    }

    .fi-logistics-story {
        gap: 15px;
    }

    .fi-story-number {
        flex: 0 0 60px;
    }

    .fi-story-content h3 {
        font-size: 25px;
    }

    .fi-logistics-visual {
        height: 360px;
    }

    .fi-logistics-capabilities {
        grid-template-columns: 1fr;
    }

    .fi-logistics-statement {
        gap: 10px;
    }

    .fi-statement-line {
        width: 30px;
    }

}


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

@media (max-width: 480px) {

    .fi-logistics-heading h2 {
        font-size: 26px;
    }

    .fi-logistics-visual {
        height: 330px;
    }

    .fi-logistics-node {
        width: 55px;
        height: 55px;
    }

    .node-booking {
        left: 30px;
    }

    .node-tracking {
        right: 30px;
    }

    .node-api {
        left: 25px;
    }

    .node-delivery {
        right: 25px;
    }

    .fi-logistics-statement p {
        font-size: 10px;
    }

}



/* ==============================software devlopment ==================================== */


/* =========================================================
   SOFTWARE DEVELOPMENT HERO
   MODERN PREMIUM DESIGN
========================================================= */

.sd-hero {
    position: relative;
    width: 100%;
    min-height: 500px;
    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(43, 125, 255, .18),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(255, 88, 54, .10),
            transparent 30%
        ),
        #071625;

    color: #fff;
}


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

.sd-grid {
    position: absolute;
    inset: 0;

    opacity: .28;

    background-image:
        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image: linear-gradient(
        to right,
        transparent,
        black 25%,
        black 75%,
        transparent
    );
}


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

.sd-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(20px);
}

.sd-glow-1 {
    width: 260px;
    height: 260px;

    right: 12%;
    top: 10%;

    background: rgba(25, 115, 255, .12);
}

.sd-glow-2 {
    width: 180px;
    height: 180px;

    left: 5%;
    bottom: -80px;

    background: rgba(255, 91, 51, .10);
}


/* =========================================================
   CONTAINER
========================================================= */

.sd-container {
    position: relative;
    z-index: 5;

    width: 90%;
    max-width: 1200px;

    margin: 0 auto;

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

    padding: 75px 0;
}


/* =========================================================
   LEFT
========================================================= */

.sd-left {
    width: 55%;
}


/* BADGE */

.sd-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 9px 16px;

    margin-bottom: 22px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 30px;

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

    color: #b8c9d9;

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

    letter-spacing: 1.7px;

    backdrop-filter: blur(10px);
}

.sd-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #ff6540;

    box-shadow:
        0 0 0 5px rgba(255,101,64,.12);
}


/* =========================================================
   HEADING
========================================================= */

.sd-left h1 {
    margin: 0;

    max-width: 650px;

    font-size: 72px;
    line-height: .98;

    font-weight: 700;

    letter-spacing: -3px;

    color: #fff;
}

.sd-left h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #ff6842,
            #ff9b68
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.sd-left p {
    max-width: 500px;

    margin: 25px 0 0;

    color: #9db2c5;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   LINE
========================================================= */

.sd-line {
    width: 65px;
    height: 4px;

    margin-top: 25px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #ff5935,
            #ff936d
        );
}


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

.sd-features {
    display: flex;
    gap: 35px;

    margin-top: 30px;
}

.sd-features div {
    display: flex;
    flex-direction: column;
    gap: 5px;

    color: #b5c6d5;

    font-size: 11px;
}

.sd-features strong {
    color: #ff7048;

    font-size: 10px;

    letter-spacing: 1px;
}


/* =========================================================
   RIGHT AREA
========================================================= */

.sd-right {
    position: relative;

    width: 430px;
    height: 330px;
}


/* =========================================================
   MAIN CARD
========================================================= */

.sd-main-card {
    position: absolute;

    width: 290px;
    height: 235px;

    left: 65px;
    top: 40px;

    padding: 22px;

    border-radius: 22px;

    border: 1px solid rgba(255,255,255,.13);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 30px 70px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.10);

    backdrop-filter: blur(18px);

    transform: rotate(-5deg);
}


/* CARD TOP */

.sd-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sd-card-top span {
    color: #7890a4;

    font-size: 10px;
    font-weight: 700;
}

.sd-card-top i {
    width: 42px;
    height: 42px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #1777ed,
            #1059c2
        );

    color: #fff;

    box-shadow:
        0 12px 25px rgba(20,100,220,.30);
}


/* =========================================================
   CODE TEXT
========================================================= */

.sd-code {
    margin-top: 45px;

    font-size: 23px;

    line-height: 1.5;

    letter-spacing: -.5px;
}

.sd-code span {
    color: #738a9d;
}

.sd-code b {
    color: #62a9ff;
}

.sd-code strong {
    display: block;

    font-size: 34px;

    color: #ff7048;
}


/* =========================================================
   CARD BOTTOM
========================================================= */

.sd-card-bottom {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 18px;

    display: flex;
    justify-content: space-between;

    padding-top: 12px;

    border-top: 1px solid rgba(255,255,255,.08);

    color: #758b9e;

    font-size: 7px;

    letter-spacing: 1px;
}


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

.sd-floating-card {
    position: absolute;

    z-index: 5;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 11px 15px;

    min-width: 165px;

    border-radius: 12px;

    border: 1px solid rgba(255,255,255,.13);

    background: rgba(10,30,48,.80);

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

    backdrop-filter: blur(15px);
}

.sd-floating-card i {
    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    background: rgba(255,101,64,.13);

    color: #ff744e;

    font-size: 13px;
}

.sd-floating-card small {
    display: block;

    margin-bottom: 3px;

    color: #71889b;

    font-size: 8px;
}

.sd-floating-card b {
    display: block;

    color: #fff;

    font-size: 10px;
}


/* CARD POSITIONS */

.sd-card-one {
    left: -5px;
    top: 15px;
}

.sd-card-two {
    right: -15px;
    bottom: 15px;
}

.sd-card-two i {
    background: rgba(55,140,255,.13);
    color: #55a1ff;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.sd-breadcrumb {
    position: absolute;

    z-index: 10;

    right: 5%;

    bottom: 25px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 10px 15px;

    border-radius: 8px;

    border: 1px solid rgba(255,255,255,.10);

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

    backdrop-filter: blur(10px);

    font-size: 10px;
}

.sd-breadcrumb a {
    color: #8da3b5;
    text-decoration: none;
}

.sd-breadcrumb span {
    color: #52687a;
}

.sd-breadcrumb b {
    color: #ff7048;
}


/* =========================================================
   BOTTOM BORDER
========================================================= */

.sd-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ff633d,
            transparent
        );
}


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

@media (max-width: 991px) {

    .sd-container {
        padding: 65px 0;
    }

    .sd-left {
        width: 55%;
    }

    .sd-left h1 {
        font-size: 54px;
    }

    .sd-right {
        transform: scale(.78);
        transform-origin: center right;
    }

    .sd-features {
        gap: 18px;
    }
}


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

@media (max-width: 767px) {

    .sd-hero {
        min-height: 420px;
    }

    .sd-container {
        display: block;

        padding: 55px 0 80px;
    }

    .sd-left {
        width: 100%;
    }

    .sd-left h1 {
        font-size: 46px;
        letter-spacing: -2px;
    }

    .sd-left p {
        max-width: 390px;

        font-size: 12px;
    }

    .sd-features {
        gap: 15px;
    }

    .sd-features div {
        font-size: 9px;
    }

    .sd-right {
        display: none;
    }

    .sd-breadcrumb {
        left: 5%;
        right: auto;
        bottom: 20px;
    }
}


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

@media (max-width: 480px) {

    .sd-left h1 {
        font-size: 40px;
    }

    .sd-badge {
        font-size: 8px;
    }

    .sd-left p {
        font-size: 11px;
    }

    .sd-features {
        flex-wrap: wrap;
        gap: 12px 20px;
    }
}




/* =========================================================
   FUTURE INFOSYS
   MODERN SOFTWARE DEVELOPMENT
========================================================= */

.fi-modern-software {
    position: relative;
    width: 100%;

    padding: 90px 0;

    overflow: hidden;

    background: #ffffff;

    font-family: inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.fi-ms-container {
    width: 90%;
    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================================
   MAIN ROW
========================================================= */

.fi-ms-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.fi-ms-content {
    position: relative;

    z-index: 5;
}


/* =========================================================
   LABEL
========================================================= */

.fi-ms-label {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 18px;

    color: #f15b3a;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.fi-ms-label span {
    width: 30px;
    height: 2px;

    background: #f15b3a;
}


/* =========================================================
   HEADING
========================================================= */

.fi-ms-heading {
    margin: 0;

    color: #162b3e;

    font-size: 54px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -2.5px;
}

.fi-ms-heading strong {
    color: #f15b3a;

    font-weight: 800;
}


/* =========================================================
   TRUSTED
========================================================= */

.fi-ms-trusted {
    display: inline-block;

    margin-top: 20px;

    padding: 8px 13px;

    border-radius: 5px;

    background: #f4f7f9;

    color: #526577;

    font-size: 10px;

    font-weight: 700;
}


/* =========================================================
   STATS
========================================================= */

.fi-ms-stats {
    display: flex;

    margin-top: 25px;

    padding: 17px 0;

    border-top: 1px solid #e8edf1;
    border-bottom: 1px solid #e8edf1;
}

.fi-ms-stat {
    display: flex;

    align-items: center;

    gap: 10px;

    padding-right: 25px;
    margin-right: 25px;

    border-right: 1px solid #e0e6eb;
}

.fi-ms-stat:last-child {
    border-right: 0;

    margin-right: 0;
    padding-right: 0;
}

.fi-ms-stat strong {
    color: #162b3e;

    font-size: 25px;

    font-weight: 800;
}

.fi-ms-stat span {
    color: #82909d;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 600;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.fi-ms-description {
    max-width: 620px;

    margin-top: 25px;
}

.fi-ms-description p {
    margin: 0 0 12px;

    color: #687887;

    font-size: 13px;

    line-height: 1.8;
}

.fi-ms-description p b {
    color: #273c4f;
}


/* =========================================================
   SOLUTIONS
========================================================= */

.fi-ms-solutions {
    margin-top: 28px;
}

.fi-ms-solution-title span {
    display: block;

    color: #f15b3a;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.fi-ms-solution-title h3 {
    margin: 5px 0 14px;

    color: #1c3448;

    font-size: 17px;

    font-weight: 800;
}


/* =========================================================
   SOLUTION GRID
========================================================= */

.fi-ms-solution-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px 15px;
}

.fi-ms-solution {
    display: flex;

    align-items: center;

    gap: 9px;

    min-height: 34px;

    padding: 5px 0;
}

.fi-ms-solution b {
    width: 27px;
    height: 27px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 6px;

    background: #fff1ed;

    color: #f15b3a;

    font-size: 8px;

    font-weight: 800;
}

.fi-ms-solution span {
    color: #657585;

    font-size: 10px;

    line-height: 1.3;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.fi-ms-visual {
    position: relative;

    height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   BACKGROUND CIRCLE
========================================================= */

.fi-ms-background-circle {
    position: absolute;

    width: 410px;
    height: 410px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #f3f7fa,
            #fff0ea
        );
}

.fi-ms-small-circle {
    position: absolute;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    border: 1px dashed #d9e2e8;
}


/* =========================================================
   MAIN SOFTWARE CARD
========================================================= */

.fi-ms-card {
    position: relative;

    z-index: 5;

    width: 380px;

    overflow: hidden;

    border-radius: 18px;

    background: #142b40;

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

    transform: rotate(-4deg);

    transition: .4s ease;
}

.fi-ms-card:hover {
    transform: rotate(0deg) translateY(-8px);
}


/* =========================================================
   CARD HEADER
========================================================= */

.fi-ms-card-header {
    height: 52px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 19px;

    border-bottom: 1px solid rgba(255,255,255,.08);
}

.fi-ms-brand {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #a7b7c4;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}

.fi-ms-brand i {
    color: #f15b3a;

    font-size: 13px;
}

.fi-ms-dots {
    display: flex;

    gap: 4px;
}

.fi-ms-dots i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #6e8190;
}


/* =========================================================
   CARD BODY
========================================================= */

.fi-ms-card-body {
    padding: 32px 28px;
}

.fi-ms-card-label {
    color: #758b9c;

    font-size: 7px;

    letter-spacing: 1.5px;

    font-weight: 700;
}

.fi-ms-card-body h3 {
    margin: 16px 0 0;

    color: #ffffff;

    font-size: 28px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -.8px;
}

.fi-ms-card-body h3 span {
    color: #f36c4c;
}

.fi-ms-card-body p {
    max-width: 280px;

    margin: 12px 0 0;

    color: #899dac;

    font-size: 9px;

    line-height: 1.7;
}


/* =========================================================
   PROGRESS
========================================================= */

.fi-ms-progress-box {
    margin-top: 28px;
}

.fi-ms-progress-box > div:first-child {
    display: flex;

    justify-content: space-between;

    color: #879aa9;

    font-size: 8px;
}

.fi-ms-progress-box b {
    color: #f36c4c;
}

.fi-ms-progress {
    height: 5px;

    margin-top: 9px;

    overflow: hidden;

    border-radius: 10px;

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

.fi-ms-progress span {
    display: block;

    width: 92%;
    height: 100%;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #f15b3a,
            #ff9279
        );
}


/* =========================================================
   TECHNOLOGY
========================================================= */

.fi-ms-tech {
    display: flex;

    gap: 7px;

    margin-top: 25px;
}

.fi-ms-tech span {
    padding: 6px 9px;

    border-radius: 5px;

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

    color: #9aabb8;

    font-size: 7px;

    font-weight: 700;
}


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

.fi-ms-floating {
    position: absolute;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 14px;

    min-width: 175px;

    border-radius: 10px;

    background: #ffffff;

    border: 1px solid #e3e9ed;

    box-shadow:
        0 20px 40px rgba(20,43,64,.13);
}

.fi-ms-floating-one {
    left: -5px;

    top: 90px;
}

.fi-ms-floating-two {
    right: -5px;

    bottom: 80px;
}


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

.fi-ms-icon {
    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 8px;

    font-size: 11px;
}

.fi-ms-icon.orange {
    background: #fff0eb;

    color: #f15b3a;
}

.fi-ms-icon.green {
    background: #eaf8ef;

    color: #28a65b;
}

.fi-ms-floating small {
    display: block;

    color: #9aa7b1;

    font-size: 7px;

    letter-spacing: .7px;
}

.fi-ms-floating strong {
    display: block;

    margin-top: 3px;

    color: #30465a;

    font-size: 9px;
}


/* =========================================================
   BIG BACKGROUND TEXT
========================================================= */

.fi-ms-big-text {
    position: absolute;

    right: 0;

    bottom: 10px;

    color: rgba(20,43,64,.045);

    font-size: 85px;

    font-weight: 900;

    letter-spacing: -5px;
}


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

@media (max-width: 1100px) {

    .fi-ms-row {
        gap: 35px;
    }

    .fi-ms-heading {
        font-size: 46px;
    }

    .fi-ms-visual {
        transform: scale(.88);
    }
}


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

@media (max-width: 991px) {

    .fi-ms-row {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .fi-ms-content {
        max-width: 750px;

        margin: auto;
    }

    .fi-ms-visual {
        margin-top: 10px;
    }
}


@media (max-width: 767px) {

    .fi-modern-software {
        padding: 60px 0;
    }

    .fi-ms-heading {
        font-size: 40px;

        letter-spacing: -1.5px;
    }

    .fi-ms-description p {
        font-size: 12px;
    }

    .fi-ms-stats {
        flex-wrap: wrap;

        gap: 12px;
    }

    .fi-ms-stat {
        padding-right: 14px;

        margin-right: 14px;
    }

    .fi-ms-solution-grid {
        grid-template-columns: 1fr;
    }

    .fi-ms-visual {
        height: 400px;

        transform: scale(.78);

        transform-origin: top center;
    }
}


@media (max-width: 480px) {

    .fi-ms-heading {
        font-size: 34px;
    }

    .fi-ms-stats {
        display: grid;

        grid-template-columns: 1fr 1fr;
    }

    .fi-ms-stat:nth-child(2) {
        border-right: 0;
    }

    .fi-ms-visual {
        transform: scale(.65);

        height: 330px;
    }
}





/* =========================================================
   FUTURE INFOSYS
   MODERN ERP SECTION
========================================================= */

.fi-erp-modern {
    position: relative;

    padding: 95px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );

    font-family: inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.fi-erp-container {
    width: 90%;
    max-width: 1200px;

    margin: auto;
}


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

.fi-erp-header {
    max-width: 760px;

    margin: 0 auto 45px;

    text-align: center;
}

.fi-erp-label {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 15px;

    color: #f15b3a;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.fi-erp-label span {
    width: 25px;
    height: 2px;

    background: #f15b3a;
}

.fi-erp-header h2 {
    margin: 0;

    color: #172d40;

    font-size: 48px;

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -2px;
}

.fi-erp-header h2 strong {
    color: #f15b3a;
}

.fi-erp-header > p {
    max-width: 680px;

    margin: 18px auto 0;

    color: #71808e;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   DASHBOARD INTRO
========================================================= */

.fi-erp-dashboard {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 30px;

    padding: 22px 25px;

    border: 1px solid #e5eaf0;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(20,43,64,.06);
}


/* LEFT */

.fi-erp-dashboard-left {
    display: flex;

    align-items: center;

    gap: 15px;
}

.fi-erp-dashboard-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 11px;

    background: #162d42;

    color: #ffffff;

    font-size: 17px;
}

.fi-erp-dashboard-left small {
    display: block;

    color: #9aa6b0;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.2px;
}

.fi-erp-dashboard-left h3 {
    margin: 4px 0 0;

    color: #21384b;

    font-size: 16px;

    font-weight: 800;
}


/* RIGHT */

.fi-erp-dashboard-right {
    display: flex;

    align-items: center;

    gap: 35px;
}

.fi-erp-dashboard-right > div {
    padding-left: 25px;

    border-left: 1px solid #e4e9ee;
}

.fi-erp-dashboard-right strong {
    display: block;

    color: #f15b3a;

    font-size: 20px;

    font-weight: 800;
}

.fi-erp-dashboard-right span {
    display: block;

    margin-top: 2px;

    color: #8795a1;

    font-size: 8px;
}


/* =========================================================
   MODULE GRID
========================================================= */

.fi-erp-modules {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


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

.fi-erp-card {
    position: relative;

    min-height: 315px;

    padding: 22px;

    overflow: hidden;

    border: 1px solid #e5eaf0;

    border-radius: 14px;

    background: #ffffff;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.fi-erp-card::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    right: -50px;
    bottom: -50px;

    border-radius: 50%;

    background: #f7f9fb;

    transition: .3s ease;
}

.fi-erp-card:hover {
    transform: translateY(-7px);

    border-color: #f2c9be;

    box-shadow:
        0 20px 45px rgba(20,43,64,.10);
}

.fi-erp-card:hover::after {
    width: 160px;
    height: 160px;

    background: #fff1ed;
}


/* =========================================================
   CARD TOP
========================================================= */

.fi-erp-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 18px;
}

.fi-erp-card-top > span {
    color: #c0c9d1;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


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

.fi-erp-icon {
    width: 43px;
    height: 43px;

    display: flex;

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

    border-radius: 10px;

    font-size: 14px;
}


/* ICON COLORS */

.fi-erp-icon.orange {
    background: #fff0eb;
    color: #f15b3a;
}

.fi-erp-icon.blue {
    background: #edf5ff;
    color: #3985d9;
}

.fi-erp-icon.purple {
    background: #f2edff;
    color: #7859d6;
}

.fi-erp-icon.green {
    background: #eaf8ef;
    color: #29a65c;
}

.fi-erp-icon.yellow {
    background: #fff8df;
    color: #d99d17;
}

.fi-erp-icon.pink {
    background: #fff0f5;
    color: #db5b88;
}

.fi-erp-icon.cyan {
    background: #e9f9fa;
    color: #1b9ba6;
}

.fi-erp-icon.red {
    background: #fff0f0;
    color: #df4f4f;
}

.fi-erp-icon.darkblue {
    background: #eaf0f7;
    color: #315a83;
}

.fi-erp-icon.violet {
    background: #f1edff;
    color: #7256cf;
}

.fi-erp-icon.teal {
    background: #e8f8f5;
    color: #218f82;
}

.fi-erp-icon.indigo {
    background: #edf0ff;
    color: #5667c9;
}


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

.fi-erp-card h3 {
    position: relative;

    z-index: 2;

    margin: 0;

    color: #1b3348;

    font-size: 17px;

    line-height: 1.25;

    font-weight: 800;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.fi-erp-card > p {
    position: relative;

    z-index: 2;

    margin: 11px 0 18px;

    color: #788795;

    font-size: 11px;

    line-height: 1.7;
}


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

.fi-erp-features {
    position: relative;

    z-index: 3;

    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}

.fi-erp-features span {
    padding: 6px 8px;

    border-radius: 5px;

    background: #f5f7f9;

    color: #71808d;

    font-size: 7px;

    line-height: 1.2;

    font-weight: 600;

    transition: .25s ease;
}

.fi-erp-card:hover .fi-erp-features span {
    background: #fff5f2;

    color: #e75a3b;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.fi-erp-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 35px;

    padding: 28px 30px;

    border-radius: 14px;

    background: #162d42;

    box-shadow:
        0 20px 45px rgba(20,43,64,.13);
}

.fi-erp-bottom span {
    color: #f36a4b;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.fi-erp-bottom h3 {
    max-width: 600px;

    margin: 7px 0 0;

    color: #ffffff;

    font-size: 21px;

    line-height: 1.3;

    font-weight: 700;
}


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

.fi-erp-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    padding: 13px 18px;

    border-radius: 7px;

    background: #f15b3a;

    color: #ffffff;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    transition: .3s ease;
}

.fi-erp-btn:hover {
    background: #ff7657;

    color: #ffffff;

    transform: translateY(-2px);
}

.fi-erp-btn i {
    font-size: 8px;
}


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

@media(max-width: 1100px) {

    .fi-erp-modules {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .fi-erp-header h2 {
        font-size: 42px;
    }
}


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

@media(max-width: 767px) {

    .fi-erp-modern {
        padding: 65px 0;
    }

    .fi-erp-header {
        margin-bottom: 30px;
    }

    .fi-erp-header h2 {
        font-size: 36px;
    }

    .fi-erp-header > p {
        font-size: 12px;
    }

    .fi-erp-dashboard {
        display: block;
    }

    .fi-erp-dashboard-right {
        margin-top: 20px;

        gap: 20px;
    }

    .fi-erp-dashboard-right > div {
        padding-left: 15px;
    }

    .fi-erp-modules {
        grid-template-columns: 1fr;
    }

    .fi-erp-card {
        min-height: auto;
    }

    .fi-erp-bottom {
        display: block;
    }

    .fi-erp-btn {
        margin-top: 20px;
    }
}


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

@media(max-width: 480px) {

    .fi-erp-container {
        width: 92%;
    }

    .fi-erp-header h2 {
        font-size: 31px;
    }

    .fi-erp-dashboard {
        padding: 18px;
    }

    .fi-erp-dashboard-left h3 {
        font-size: 14px;
    }

    .fi-erp-dashboard-right {
        justify-content: space-between;

        gap: 8px;
    }

    .fi-erp-dashboard-right strong {
        font-size: 17px;
    }

    .fi-erp-dashboard-right span {
        font-size: 7px;
    }

    .fi-erp-card {
        padding: 19px;
    }

    .fi-erp-card h3 {
        font-size: 16px;
    }

    .fi-erp-bottom {
        padding: 22px;
    }

    .fi-erp-bottom h3 {
        font-size: 17px;
    }
}




/* =========================================================
   MODERN MOBILE APP DEVELOPMENT
========================================================= */

.fi-mobile-app-section {
    position: relative;
    padding: 110px 20px;
    background: #f5f6f8;
    overflow: hidden;
    font-family: Inter, Arial, sans-serif;
    color: #111318;
}

.fi-mobile-app-container {
    max-width: 1250px;
    min-height: 650px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.fi-mobile-app-content {
    position: relative;
    z-index: 5;
}

.fi-mobile-app-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #737780;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;

    margin-bottom: 25px;
}

.fi-mobile-app-label-dot {
    width: 9px;
    height: 9px;

    background: #ff6422;
    border-radius: 50%;

    box-shadow:
        0 0 0 6px rgba(255, 100, 34, 0.12);
}


.fi-mobile-app-content h1 {
    margin: 0;

    max-width: 650px;

    font-size: clamp(48px, 6vw, 78px);
    line-height: .98;

    letter-spacing: -4px;
    font-weight: 800;
}

.fi-mobile-app-content h1 span {
    display: block;
    color: #ff6422;
}


.fi-mobile-app-content > p {
    max-width: 580px;

    margin: 30px 0 35px;

    color: #737780;

    font-size: 16px;
    line-height: 1.8;
}


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

.fi-mobile-app-buttons {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 55px;
}


.fi-mobile-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;

    padding: 8px 9px 8px 22px;

    border-radius: 100px;

    background: #111318;
    color: #fff;

    text-decoration: none;

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

    transition: .3s ease;
}


.fi-mobile-primary-btn span {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #ff6422;
    color: #fff;

    font-size: 17px;
}


.fi-mobile-primary-btn:hover {
    transform: translateY(-3px);
}


.fi-mobile-secondary-btn {
    padding: 15px 22px;

    border: 1px solid #dfe1e5;
    border-radius: 100px;

    color: #22252b;
    text-decoration: none;

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

    transition: .3s ease;
}


.fi-mobile-secondary-btn:hover {
    background: #fff;
    border-color: #cfd1d5;
}


/* =========================================================
   STATS
========================================================= */

.fi-mobile-app-stats {
    display: flex;
    gap: 0;
}


.fi-mobile-stat {
    min-width: 145px;

    padding-right: 25px;
    margin-right: 25px;

    border-right: 1px solid #dddfe3;
}


.fi-mobile-stat:last-child {
    border-right: 0;
}


.fi-mobile-stat strong {
    display: block;

    font-size: 27px;
    line-height: 1;

    letter-spacing: -1px;
}


.fi-mobile-stat span {
    display: block;

    margin-top: 8px;

    color: #858991;

    font-size: 10px;
    font-weight: 600;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.fi-mobile-app-visual {
    position: relative;

    height: 650px;

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


/* BACKGROUND GLOW */

.fi-mobile-glow {
    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 100, 34, .22),
            rgba(255, 100, 34, 0) 68%
        );

    filter: blur(5px);
}


/* =========================================================
   PHONE
========================================================= */

.fi-phone {
    position: relative;
    z-index: 3;

    width: 300px;
    height: 590px;

    padding: 9px;

    border-radius: 45px;

    background: #111318;

    box-shadow:
        0 45px 90px rgba(20, 22, 27, .25),
        inset 0 0 0 1px rgba(255,255,255,.12);

    transform: rotate(-4deg);

    transition: .5s ease;
}


.fi-mobile-app-visual:hover .fi-phone {
    transform: rotate(0deg) translateY(-8px);
}


.fi-phone-screen {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 37px;

    padding: 30px 20px 20px;

    background: #f7f7f8;
}


/* PHONE NOTCH */

.fi-phone-notch {
    position: absolute;
    z-index: 10;

    top: 18px;
    left: 50%;

    width: 105px;
    height: 25px;

    transform: translateX(-50%);

    border-radius: 20px;

    background: #111318;
}


/* =========================================================
   PHONE HEADER
========================================================= */

.fi-phone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 15px;
}


.fi-phone-header small {
    display: block;

    color: #999da5;

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

    letter-spacing: 1px;
}


.fi-phone-header strong {
    display: block;

    margin-top: 5px;

    font-size: 16px;
}


.fi-profile-circle {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #111318;
    color: #fff;

    font-size: 12px;
}


/* =========================================================
   MAIN APP CARD
========================================================= */

.fi-app-main-card {
    margin-top: 28px;

    padding: 20px;

    border-radius: 20px;

    background: #111318;
    color: #fff;

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


.fi-app-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 12px;
}


.fi-app-card-top span {
    color: #92969f;
    font-size: 8px;
}


.fi-app-card-top b {
    color: #6ee09a;
    font-size: 9px;
}


.fi-app-main-card > strong {
    font-size: 25px;
    letter-spacing: -.8px;
}


/* =========================================================
   MINI CHART
========================================================= */

.fi-mini-chart {
    height: 80px;

    display: flex;
    align-items: end;

    gap: 7px;

    margin-top: 18px;
}


.fi-mini-chart i {
    flex: 1;

    display: block;

    border-radius: 5px 5px 1px 1px;

    background: linear-gradient(
        to top,
        #ff6422,
        #ff9870
    );
}


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

.fi-app-feature-title {
    margin-top: 25px;
    margin-bottom: 12px;

    font-size: 11px;
    font-weight: 800;
}


.fi-app-features {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;
}


.fi-app-feature {
    padding: 12px 5px;

    text-align: center;

    background: #fff;

    border-radius: 13px;

    box-shadow: 0 5px 20px rgba(0,0,0,.04);
}


.fi-feature-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    margin: auto;

    border-radius: 10px;

    background: #fff0e9;

    color: #ff6422;

    font-size: 11px;
}


.fi-app-feature span {
    display: block;

    margin-top: 7px;

    color: #777b83;

    font-size: 8px;
    font-weight: 700;
}


/* =========================================================
   BOTTOM NAV
========================================================= */

.fi-app-bottom-nav {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 16px;

    height: 48px;

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

    border-radius: 17px;

    background: #fff;

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

    color: #b2b5ba;

    font-size: 13px;
}


.fi-app-bottom-nav .active {
    color: #ff6422;
}


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

.fi-floating-card {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px 16px;

    border: 1px solid rgba(255,255,255,.7);

    border-radius: 15px;

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

    backdrop-filter: blur(15px);

    box-shadow:
        0 20px 50px rgba(20,22,28,.12);

    animation: fiFloat 4s ease-in-out infinite;
}


.fi-floating-card strong {
    display: block;

    font-size: 11px;
}


.fi-floating-card span {
    display: block;

    margin-top: 3px;

    color: #8b8e95;

    font-size: 8px;
}


.fi-floating-icon {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background: #111318;
    color: #fff;

    font-size: 14px;
}


.fi-floating-one {
    top: 105px;
    left: 15px;
}


.fi-floating-two {
    top: 280px;
    right: 0;

    animation-delay: -1.5s;
}


.fi-floating-three {
    bottom: 115px;
    left: 15px;

    animation-delay: -2.5s;
}


.fi-online-dot {
    width: 9px !important;
    height: 9px !important;

    margin: 0 !important;

    border-radius: 50%;

    background: #48cf7b;

    box-shadow: 0 0 0 5px rgba(72,207,123,.12);
}


@keyframes fiFloat {

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

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

}


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

@media (max-width: 1000px) {

    .fi-mobile-app-container {
        grid-template-columns: 1fr;

        gap: 40px;

        text-align: center;
    }

    .fi-mobile-app-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .fi-mobile-app-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .fi-mobile-app-visual {
        height: 620px;
    }

}


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

@media (max-width: 600px) {

    .fi-mobile-app-section {
        padding: 70px 15px;
    }

    .fi-mobile-app-container {
        min-height: auto;
    }

    .fi-mobile-app-content h1 {
        font-size: 46px;
        letter-spacing: -2.5px;
    }

    .fi-mobile-app-content > p {
        font-size: 14px;
        line-height: 1.7;
    }

    .fi-mobile-app-buttons {
        flex-direction: column;

        width: 100%;

        margin-bottom: 40px;
    }

    .fi-mobile-primary-btn,
    .fi-mobile-secondary-btn {
        width: max-content;
    }

    .fi-mobile-app-stats {
        width: 100%;
        justify-content: center;
    }

    .fi-mobile-stat {
        min-width: auto;

        padding: 0 14px;
        margin: 0 0;
    }

    .fi-mobile-stat strong {
        font-size: 21px;
    }

    .fi-mobile-stat span {
        font-size: 8px;
    }

    .fi-mobile-app-visual {
        height: 580px;
    }

    .fi-phone {
        width: 270px;
        height: 530px;
    }

    .fi-floating-one {
        left: -5px;
        top: 70px;
    }

    .fi-floating-two {
        right: -5px;
        top: 245px;
    }

    .fi-floating-three {
        left: -5px;
        bottom: 75px;
    }

}




/* ======================================Mobile App css ==================================== */



/* =========================================================
   MODERN MOBILE APP SOLUTIONS
========================================================= */

.fi-mobile-solutions {
    position: relative;
    padding: 120px 20px;

    background: #f7f7f8;

    overflow: hidden;

    font-family: Inter, Arial, sans-serif;
    color: #121419;
}

.fi-mobile-solutions-container {
    max-width: 1280px;
    margin: auto;
}


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

.fi-mobile-solutions-header {
    max-width: 850px;
    margin-bottom: 80px;
}

.fi-mobile-solutions-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 25px;

    color: #777b83;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.fi-mobile-solutions-label span {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #ff6422;

    box-shadow:
        0 0 0 6px rgba(255,100,34,.12);
}

.fi-mobile-solutions-header h2 {
    margin: 0;

    font-size: clamp(45px, 5vw, 70px);

    line-height: 1;

    letter-spacing: -3.5px;

    font-weight: 800;
}

.fi-mobile-solutions-header h2 strong {
    display: block;

    color: #ff6422;
}

.fi-mobile-solutions-header p {
    max-width: 650px;

    margin: 30px 0 0;

    color: #777b83;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.fi-mobile-feature-layout {
    display: grid;

    grid-template-columns: 46% 54%;

    align-items: start;

    gap: 70px;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.fi-mobile-feature-visual {
    position: sticky;
    top: 40px;

    height: 760px;

    overflow: hidden;

    border-radius: 32px;

    background: #111318;

    isolation: isolate;
}

.fi-mobile-visual-bg {
    position: absolute;

    width: 600px;
    height: 600px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,100,34,.35),
            rgba(255,100,34,0) 65%
        );

    z-index: -1;
}

.fi-mobile-feature-visual::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -180px;
    right: -180px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;
}

.fi-mobile-feature-visual::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    bottom: -150px;
    left: -150px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;
}


/* =========================================================
   VISUAL LABEL
========================================================= */

.fi-mobile-visual-label {
    position: absolute;

    top: 35px;
    left: 35px;

    color: rgba(255,255,255,.45);

    font-size: 9px;

    letter-spacing: 2px;

    font-weight: 800;
}


/* =========================================================
   PHONE
========================================================= */

.fi-mobile-device {
    position: absolute;

    width: 295px;
    height: 570px;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-5deg);

    padding: 9px;

    border-radius: 43px;

    background: #050608;

    box-shadow:
        0 50px 100px rgba(0,0,0,.5),
        inset 0 0 0 1px rgba(255,255,255,.15);

    transition: .5s ease;
}

.fi-mobile-feature-visual:hover .fi-mobile-device {
    transform:
        translate(-50%, -50%)
        rotate(0deg)
        translateY(-8px);
}


/* =========================================================
   PHONE SCREEN
========================================================= */

.fi-device-content {
    height: 100%;

    overflow: hidden;

    padding: 40px 20px 80px;

    border-radius: 35px;

    background: #f7f7f8;

    color: #111318;
}

.fi-device-top {
    position: absolute;

    z-index: 5;

    top: 18px;
    left: 50%;

    width: 105px;
    height: 23px;

    transform: translateX(-50%);

    border-radius: 20px;

    background: #050608;
}


/* =========================================================
   DEVICE WELCOME
========================================================= */

.fi-device-welcome small {
    display: block;

    color: #999da5;

    font-size: 7px;

    letter-spacing: 1px;

    font-weight: 700;
}

.fi-device-welcome strong {
    display: block;

    margin-top: 5px;

    font-size: 17px;
}


/* =========================================================
   DEVICE BUSINESS CARD
========================================================= */

.fi-device-balance {
    margin-top: 28px;

    padding: 20px;

    border-radius: 20px;

    background: #15171c;

    color: #fff;

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

.fi-device-balance span {
    display: block;

    color: #8d929b;

    font-size: 7px;

    letter-spacing: 1px;
}

.fi-device-balance strong {
    display: block;

    margin-top: 10px;

    font-size: 27px;

    letter-spacing: -1px;
}


/* =========================================================
   CHART
========================================================= */

.fi-device-bars {
    height: 85px;

    display: flex;

    align-items: end;

    gap: 7px;

    margin-top: 18px;
}

.fi-device-bars i {
    flex: 1;

    height: 50%;

    border-radius: 5px 5px 2px 2px;

    background:
        linear-gradient(
            to top,
            #ff6422,
            #ff9a70
        );
}

.fi-device-bars i:nth-child(1) {
    height: 35%;
}

.fi-device-bars i:nth-child(2) {
    height: 55%;
}

.fi-device-bars i:nth-child(3) {
    height: 45%;
}

.fi-device-bars i:nth-child(4) {
    height: 70%;
}

.fi-device-bars i:nth-child(5) {
    height: 58%;
}

.fi-device-bars i:nth-child(6) {
    height: 78%;
}

.fi-device-bars i:nth-child(7) {
    height: 92%;
}


/* =========================================================
   DEVICE ACTIONS
========================================================= */

.fi-device-actions {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 7px;

    margin-top: 25px;
}

.fi-device-actions div {
    padding: 12px 4px;

    text-align: center;

    border-radius: 13px;

    background: #fff;

    color: #777b83;

    font-size: 8px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.04);
}

.fi-device-actions span {
    display: grid;

    place-items: center;

    width: 29px;
    height: 29px;

    margin: 0 auto 6px;

    border-radius: 9px;

    background: #fff0e9;

    color: #ff6422;

    font-size: 12px;
}


/* =========================================================
   DEVICE NAV
========================================================= */

.fi-device-nav {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 17px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    border-radius: 16px;

    background: #fff;
}

.fi-device-nav span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #d5d7da;
}

.fi-device-nav span.active {
    width: 25px;

    border-radius: 10px;

    background: #ff6422;
}


/* =========================================================
   FLOATING BADGES
========================================================= */

.fi-mobile-badge {
    position: absolute;

    z-index: 8;

    padding: 13px 17px;

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 15px;

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

    backdrop-filter: blur(18px);

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

    color: #fff;
}

.fi-mobile-badge b {
    display: block;

    font-size: 10px;
}

.fi-mobile-badge > span {
    display: block;

    margin-top: 4px;

    color: #999ea7;

    font-size: 8px;
}


/* ANDROID */

.fi-badge-android {
    top: 190px;
    left: 35px;
}


/* IOS */

.fi-badge-ios {
    top: 330px;
    right: 25px;

    animation:
        fiMobileFloat 4s ease-in-out infinite;
}


/* SECURITY */

.fi-badge-security {
    bottom: 80px;
    left: 30px;

    display: flex;

    align-items: center;

    gap: 10px;

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

    animation-delay: -2s;
}

.fi-security-icon {
    width: 30px !important;
    height: 30px;

    display: grid !important;

    place-items: center;

    margin: 0 !important;

    border-radius: 9px;

    background: #45c97b;

    color: #fff !important;

    font-size: 12px !important;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.fi-mobile-feature-content {
    padding-top: 15px;
}


/* TITLE */

.fi-mobile-content-top {
    display: flex;

    gap: 25px;

    align-items: flex-start;
}

.fi-mobile-content-number {
    color: #ff6422;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;
}

.fi-mobile-content-label {
    color: #999da5;

    font-size: 9px;

    letter-spacing: 1.8px;

    font-weight: 800;
}

.fi-mobile-content-top h3 {
    max-width: 500px;

    margin: 12px 0 0;

    font-size: 45px;

    line-height: 1.05;

    letter-spacing: -2px;
}

.fi-mobile-content-top h3 strong {
    color: #ff6422;
}


/* =========================================================
   EXPERIENCE
========================================================= */

.fi-mobile-experience {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    margin: 35px 0;

    padding: 22px 0;

    border-top: 1px solid #dedfe2;
    border-bottom: 1px solid #dedfe2;
}

.fi-mobile-experience div {
    padding-left: 20px;

    border-left: 1px solid #dedfe2;
}

.fi-mobile-experience div:first-child {
    padding-left: 0;

    border-left: 0;
}

.fi-mobile-experience strong {
    display: block;

    font-size: 25px;

    letter-spacing: -1px;
}

.fi-mobile-experience span {
    display: block;

    margin-top: 5px;

    color: #858991;

    font-size: 9px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.fi-mobile-description {
    max-width: 650px;

    color: #737780;

    font-size: 14px;

    line-height: 1.8;
}

.fi-mobile-description strong {
    color: #202329;
}


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

.fi-mobile-solutions-title {
    margin: 45px 0 18px;

    color: #111318;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .5px;
}


/* =========================================================
   SOLUTION LIST
========================================================= */

.fi-mobile-solutions-list {
    border-top: 1px solid #dedfe2;
}

.fi-mobile-solution {
    position: relative;

    display: grid;

    grid-template-columns: 45px 1fr 35px;

    gap: 15px;

    align-items: center;

    padding: 22px 0;

    border-bottom: 1px solid #dedfe2;

    transition: .3s ease;
}

.fi-mobile-solution:hover {
    padding-left: 12px;

    background: rgba(255,255,255,.5);
}

.fi-solution-no {
    color: #a1a4aa;

    font-size: 9px;

    font-weight: 800;
}

.fi-mobile-solution h4 {
    margin: 0;

    font-size: 15px;

    letter-spacing: -.3px;
}

.fi-mobile-solution p {
    max-width: 520px;

    margin: 7px 0 0;

    color: #858991;

    font-size: 11px;

    line-height: 1.6;
}

.fi-solution-arrow {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    border: 1px solid #dfe1e4;

    border-radius: 50%;

    color: #777b83;

    font-size: 13px;

    transition: .3s;
}

.fi-mobile-solution:hover .fi-solution-arrow {
    background: #ff6422;

    border-color: #ff6422;

    color: #fff;

    transform: rotate(45deg);
}


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

@keyframes fiMobileFloat {

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

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

}


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

@media (max-width: 1000px) {

    .fi-mobile-feature-layout {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .fi-mobile-feature-visual {
        position: relative;

        height: 650px;
    }

    .fi-mobile-feature-content {
        padding: 0;
    }

}


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

@media (max-width: 600px) {

    .fi-mobile-solutions {
        padding: 75px 15px;
    }

    .fi-mobile-solutions-header {
        margin-bottom: 50px;
    }

    .fi-mobile-solutions-header h2 {
        font-size: 43px;

        letter-spacing: -2.5px;
    }

    .fi-mobile-solutions-header p {
        font-size: 14px;
    }

    .fi-mobile-feature-visual {
        height: 570px;

        border-radius: 24px;
    }

    .fi-mobile-device {
        width: 245px;
        height: 475px;
    }

    .fi-device-content {
        padding: 35px 17px 70px;
    }

    .fi-device-balance {
        margin-top: 20px;

        padding: 16px;
    }

    .fi-device-balance strong {
        font-size: 22px;
    }

    .fi-mobile-badge {
        padding: 10px 12px;
    }

    .fi-badge-android {
        top: 120px;
        left: 12px;
    }

    .fi-badge-ios {
        top: 280px;
        right: 10px;
    }

    .fi-badge-security {
        bottom: 45px;
        left: 10px;
    }

    .fi-mobile-content-top {
        gap: 12px;
    }

    .fi-mobile-content-top h3 {
        font-size: 34px;

        letter-spacing: -1.5px;
    }

    .fi-mobile-experience {
        gap: 8px;
    }

    .fi-mobile-experience div {
        padding-left: 10px;
    }

    .fi-mobile-experience strong {
        font-size: 20px;
    }

    .fi-mobile-experience span {
        font-size: 7px;
    }

    .fi-mobile-solution {
        grid-template-columns: 30px 1fr 30px;

        gap: 8px;
    }

    .fi-mobile-solution h4 {
        font-size: 13px;
    }

    .fi-mobile-solution p {
        font-size: 10px;
    }

}



/* ===================website degisn================================= */

/* =========================================================
   MODERN WEBSITE DESIGNING SECTION
========================================================= */

.fi-web-design-section {
    position: relative;

    padding: 120px 20px;

    background: #f5f6f8;

    overflow: hidden;

    font-family: Inter, Arial, sans-serif;

    color: #111318;
}


.fi-web-design-container {
    max-width: 1280px;

    min-height: 650px;

    margin: auto;

    display: grid;

    grid-template-columns: 46% 54%;

    align-items: center;

    gap: 50px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.fi-web-design-content {
    position: relative;

    z-index: 5;
}


.fi-web-design-label {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

    color: #777b83;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


.fi-web-design-label span {
    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #ff6422;

    box-shadow:
        0 0 0 6px rgba(255,100,34,.12);
}


.fi-web-design-content h1 {
    max-width: 650px;

    margin: 0;

    font-size: clamp(48px, 6vw, 76px);

    line-height: .98;

    letter-spacing: -4px;

    font-weight: 800;
}


.fi-web-design-content h1 span {
    display: block;

    color: #ff6422;
}


.fi-web-design-content > p {
    max-width: 570px;

    margin: 30px 0 35px;

    color: #747880;

    font-size: 16px;

    line-height: 1.8;
}


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

.fi-web-design-actions {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 55px;
}


.fi-web-primary-btn {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 8px 9px 8px 22px;

    border-radius: 100px;

    background: #111318;

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: .3s ease;
}


.fi-web-primary-btn span {
    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #ff6422;

    color: #fff;

    font-size: 17px;
}


.fi-web-primary-btn:hover {
    transform: translateY(-3px);
}


.fi-web-secondary-btn {
    padding: 15px 22px;

    border: 1px solid #dfe1e5;

    border-radius: 100px;

    background: transparent;

    color: #22252b;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: .3s ease;
}


.fi-web-secondary-btn:hover {
    background: #fff;

    border-color: #d1d3d7;
}


/* =========================================================
   STATS
========================================================= */

.fi-web-stats {
    display: flex;
}


.fi-web-stat {
    min-width: 145px;

    padding-right: 25px;

    margin-right: 25px;

    border-right: 1px solid #dddfe3;
}


.fi-web-stat:last-child {
    border-right: 0;
}


.fi-web-stat strong {
    display: block;

    font-size: 27px;

    line-height: 1;

    letter-spacing: -1px;
}


.fi-web-stat span {
    display: block;

    margin-top: 8px;

    color: #858991;

    font-size: 9px;

    font-weight: 600;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.fi-web-design-visual {
    position: relative;

    height: 650px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* GLOW */

.fi-web-glow {
    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,100,34,.20),
            rgba(255,100,34,0) 68%
        );
}


/* =========================================================
   BROWSER
========================================================= */

.fi-browser {
    position: relative;

    z-index: 3;

    width: 650px;

    min-height: 440px;

    border-radius: 18px;

    overflow: hidden;

    background: #fff;

    box-shadow:
        0 40px 90px rgba(20,24,30,.18);

    transform: rotate(2deg);

    transition: .5s ease;
}


.fi-web-design-visual:hover .fi-browser {
    transform: rotate(0deg) translateY(-8px);
}


/* =========================================================
   BROWSER TOP
========================================================= */

.fi-browser-top {
    height: 42px;

    display: grid;

    grid-template-columns: 100px 1fr 50px;

    align-items: center;

    padding: 0 15px;

    background: #191b20;

    color: #fff;
}


.fi-browser-dots {
    display: flex;

    gap: 6px;
}


.fi-browser-dots i {
    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #676b73;
}


.fi-browser-url {
    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

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

    color: #9da1a8;

    font-size: 8px;
}


.fi-browser-menu {
    text-align: right;

    color: #8b8f97;

    font-size: 11px;
}


/* =========================================================
   DEMO PAGE
========================================================= */

.fi-browser-page {
    min-height: 398px;

    padding: 22px 28px;

    background: #f8f8f9;
}


/* NAV */

.fi-demo-nav {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.fi-demo-logo {
    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1px;
}


.fi-demo-logo span {
    width: 13px;

    height: 13px;

    border-radius: 4px;

    background: #ff6422;
}


.fi-demo-links {
    display: flex;

    gap: 20px;

    color: #858991;

    font-size: 7px;

    font-weight: 700;
}


.fi-demo-button {
    padding: 7px 11px;

    border-radius: 20px;

    background: #111318;

    color: #fff;

    font-size: 7px;

    font-weight: 700;
}


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

.fi-demo-hero {
    min-height: 250px;

    display: grid;

    grid-template-columns: 45% 55%;

    align-items: center;

    margin-top: 15px;

    padding: 20px;

    border-radius: 16px;

    overflow: hidden;

    background: #111318;

    color: #fff;
}


.fi-demo-copy small {
    color: #ff7440;

    font-size: 6px;

    letter-spacing: 1.5px;

    font-weight: 800;
}


.fi-demo-copy h2 {
    margin: 10px 0;

    font-size: 42px;

    line-height: .82;

    letter-spacing: -2px;
}


.fi-demo-copy h2 b {
    color: #ff6422;
}


.fi-demo-copy p {
    max-width: 180px;

    color: #898e98;

    font-size: 7px;

    line-height: 1.6;
}


.fi-demo-line {
    width: 50px;

    height: 3px;

    margin-top: 15px;

    border-radius: 10px;

    background: #ff6422;
}


/* =========================================================
   ABSTRACT DESIGN
========================================================= */

.fi-demo-art {
    position: relative;

    height: 230px;
}


.fi-art-circle {
    position: absolute;

    width: 200px;

    height: 200px;

    top: 10px;

    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffae8d,
            #ff6422 48%,
            #8d2e13 100%
        );

    opacity: .9;
}


.fi-art-shape {
    position: absolute;

    width: 115px;

    height: 115px;

    top: 50px;

    left: 50%;

    transform: translateX(-50%) rotate(45deg);

    border-radius: 25px;

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

    border: 1px solid rgba(255,255,255,.3);

    backdrop-filter: blur(10px);
}


.fi-art-card {
    position: absolute;

    z-index: 4;

    padding: 10px 13px;

    border-radius: 9px;

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

    color: #111318;

    box-shadow:
        0 15px 30px rgba(0,0,0,.2);
}


.fi-art-card span {
    display: block;

    color: #898d95;

    font-size: 6px;
}


.fi-art-card b {
    display: block;

    margin-top: 3px;

    font-size: 14px;
}


.fi-art-card-one {
    top: 55px;

    left: 15px;
}


.fi-art-card-two {
    right: 5px;

    bottom: 40px;
}


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

.fi-demo-bottom {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 8px;

    margin-top: 12px;
}


.fi-demo-bottom div {
    padding: 10px 12px;

    border-radius: 8px;

    background: #fff;
}


.fi-demo-bottom span {
    display: block;

    color: #ff6422;

    font-size: 6px;

    font-weight: 800;
}


.fi-demo-bottom b {
    display: block;

    margin-top: 4px;

    font-size: 8px;
}


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

.fi-web-floating {
    position: absolute;

    z-index: 6;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    border: 1px solid rgba(255,255,255,.7);

    border-radius: 14px;

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

    backdrop-filter: blur(15px);

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

    animation:
        fiWebFloat 4s ease-in-out infinite;
}


.fi-web-floating strong {
    display: block;

    font-size: 10px;
}


.fi-web-floating span {
    display: block;

    margin-top: 3px;

    color: #898d95;

    font-size: 7px;
}


.fi-floating-symbol {
    width: 32px;

    height: 32px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    background: #111318;

    color: #fff;

    font-size: 13px;
}


.fi-web-floating-one {
    top: 125px;

    left: 0;
}


.fi-web-floating-two {
    right: -5px;

    top: 260px;

    animation-delay: -1.5s;
}


.fi-web-floating-three {
    left: 20px;

    bottom: 105px;

    animation-delay: -2.5s;
}


.fi-live-dot {
    width: 9px !important;

    height: 9px !important;

    margin: 0 !important;

    border-radius: 50%;

    background: #46cf79;

    box-shadow:
        0 0 0 5px rgba(70,207,121,.12);
}


@keyframes fiWebFloat {

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

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

}


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

@media (max-width: 1050px) {

    .fi-web-design-container {
        grid-template-columns: 1fr;

        text-align: center;

        gap: 50px;
    }

    .fi-web-design-content {
        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .fi-web-design-actions {
        justify-content: center;
    }

    .fi-web-stats {
        justify-content: center;
    }

    .fi-web-design-visual {
        width: 100%;
    }

}


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

@media (max-width: 700px) {

    .fi-web-design-section {
        padding: 75px 15px;
    }

    .fi-web-design-content h1 {
        font-size: 45px;

        letter-spacing: -2.5px;
    }

    .fi-web-design-content > p {
        font-size: 14px;
    }

    .fi-web-design-actions {
        flex-direction: column;

        margin-bottom: 40px;
    }

    .fi-web-stats {
        width: 100%;
    }

    .fi-web-stat {
        min-width: auto;

        padding-right: 12px;

        margin-right: 12px;
    }

    .fi-web-stat strong {
        font-size: 21px;
    }

    .fi-web-stat span {
        font-size: 7px;
    }

    .fi-web-design-visual {
        height: 470px;
    }

    .fi-browser {
        width: 100%;

        max-width: 500px;

        transform: none;
    }

    .fi-browser-page {
        padding: 15px;
    }

    .fi-demo-links {
        display: none;
    }

    .fi-demo-hero {
        grid-template-columns: 48% 52%;

        padding: 15px;
    }

    .fi-demo-copy h2 {
        font-size: 31px;
    }

    .fi-demo-art {
        transform: scale(.85);
    }

    .fi-web-floating {
        padding: 9px 11px;
    }

    .fi-web-floating-one {
        left: -5px;

        top: 80px;
    }

    .fi-web-floating-two {
        right: -5px;

        top: 220px;
    }

    .fi-web-floating-three {
        left: -5px;

        bottom: 50px;
    }

}



/* =========================================================
   MODERN WEBSITE DESIGN SERVICES
========================================================= */

.fi-wds-section {
    position: relative;
    overflow: hidden;

    padding: 100px 20px;

    background: #f4f4f1;

    color: #111214;

    font-family: Inter, Arial, sans-serif;
}

.fi-wds-container {
    max-width: 1280px;
    margin: auto;
}


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

.fi-wds-hero {
    min-height: 650px;

    display: grid;
    grid-template-columns: 52% 48%;

    align-items: stretch;

    margin-bottom: 110px;
}


.fi-wds-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 70px 50px 70px 0;
}


.fi-wds-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 30px;

    color: #74777b;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 2px;
}


.fi-wds-eyebrow span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ff5d22;
}


.fi-wds-hero h1 {
    margin: 0;

    font-size: clamp(60px, 7vw, 105px);

    line-height: .86;

    letter-spacing: -6px;

    font-weight: 900;
}


.fi-wds-hero h1 em {
    color: #ff5d22;

    font-style: normal;
}


.fi-wds-hero-content > p {
    max-width: 600px;

    margin: 35px 0 0;

    color: #73767a;

    font-size: 14px;

    line-height: 1.8;
}


.fi-wds-hero-content > p + p {
    margin-top: 8px;
}


.fi-wds-cta {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    width: max-content;

    margin-top: 35px;

    padding: 6px 7px 6px 20px;

    border-radius: 50px;

    background: #111214;

    color: #fff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 800;

    transition: .3s ease;
}


.fi-wds-cta span {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #ff5d22;

    font-size: 16px;
}


.fi-wds-cta:hover {
    transform: translateX(5px);
}


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

.fi-wds-hero-visual {
    position: relative;

    min-height: 650px;

    overflow: hidden;

    background: #17191d;
}


.fi-wds-grid-lines {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size: 50px 50px;
}


.fi-wds-visual-word {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    color: #ff5d22;

    font-size: 150px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -12px;

    opacity: .9;
}


.fi-wds-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border: 1px solid rgba(255,255,255,.2);

    border-radius: 50%;

    transform: translate(-50%, -50%) rotate(25deg);
}


.fi-orbit-one {
    width: 440px;
    height: 440px;
}


.fi-orbit-two {
    width: 310px;
    height: 520px;
}


.fi-wds-center-circle {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 125px;
    height: 125px;

    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    background: #111214;

    color: #fff;

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


.fi-wds-center-circle span {
    color: #ff5d22;

    font-size: 10px;
}


.fi-wds-center-circle strong {
    margin-top: 5px;

    font-size: 14px;

    letter-spacing: 2px;
}


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

.fi-wds-floating-card {
    position: absolute;

    padding: 15px 18px;

    background: #fff;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);

    z-index: 5;
}


.fi-wds-floating-card small {
    display: block;

    color: #ff5d22;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1px;
}


.fi-wds-floating-card strong {
    display: block;

    margin-top: 6px;

    font-size: 12px;
}


.fi-wds-card-a {
    top: 100px;
    left: 35px;
}


.fi-wds-card-b {
    top: 290px;
    right: 25px;
}


.fi-wds-card-c {
    bottom: 90px;
    left: 80px;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.fi-wds-section-heading {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 50px;

    margin-bottom: 45px;
}


.fi-wds-section-heading > div > span {
    color: #ff5d22;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.fi-wds-section-heading h2 {
    max-width: 700px;

    margin: 12px 0 0;

    font-size: 48px;

    line-height: 1;

    letter-spacing: -2.5px;
}


.fi-wds-section-heading h2 strong {
    color: #ff5d22;
}


.fi-wds-section-heading > p {
    max-width: 380px;

    margin: 0;

    color: #777a7e;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   WHY GRID
========================================================= */

.fi-wds-why-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

    margin-bottom: 120px;
}


.fi-wds-why-card {
    position: relative;

    min-height: 290px;

    padding: 30px;

    background: #fff;

    border: 1px solid #dededb;

    transition: .3s ease;
}


.fi-wds-why-card:hover {
    transform: translateY(-7px);

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


.fi-wds-number {
    position: absolute;

    top: 25px;
    right: 25px;

    color: #b2b3b5;

    font-size: 9px;

    font-weight: 900;
}


.fi-wds-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 55px;

    border-radius: 12px;

    background: #fff0e9;

    color: #ff5d22;

    font-size: 20px;
}


.fi-wds-why-card h3 {
    margin: 0;

    font-size: 21px;

    letter-spacing: -.5px;
}


.fi-wds-why-card p {
    max-width: 310px;

    margin: 12px 0 0;

    color: #777a7e;

    font-size: 11px;

    line-height: 1.7;
}


/* DARK */

.fi-wds-dark {
    background: #17191d;

    color: #fff;

    border-color: #17191d;
}


.fi-wds-dark p {
    color: #969aa1;
}


/* ORANGE */

.fi-wds-orange {
    background: #ff5d22;

    color: #fff;

    border-color: #ff5d22;
}


.fi-wds-orange p {
    color: rgba(255,255,255,.75);
}


.fi-wds-orange .fi-wds-icon {
    background: rgba(255,255,255,.15);

    color: #fff;
}


/* WIDE */

.fi-wds-wide {
    grid-column: span 2;

    min-height: 210px;
}


.fi-wds-wide-content {
    display: flex;

    align-items: center;

    gap: 30px;
}


.fi-wds-wide .fi-wds-icon {
    flex-shrink: 0;

    margin-bottom: 0;
}


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

.fi-wds-services {
    margin-bottom: 120px;
}


.fi-wds-service-list {
    border-top: 1px solid #d8d8d5;
}


.fi-wds-service-item {
    display: grid;

    grid-template-columns: 60px 1fr 40px;

    align-items: center;

    gap: 20px;

    padding: 27px 0;

    border-bottom: 1px solid #d8d8d5;

    transition: .3s ease;
}


.fi-wds-service-item:hover {
    padding-left: 15px;

    background: rgba(255,255,255,.5);
}


.fi-wds-service-item > span {
    color: #ff5d22;

    font-size: 10px;

    font-weight: 900;
}


.fi-wds-service-item h3 {
    margin: 0;

    font-size: 19px;
}


.fi-wds-service-item p {
    max-width: 650px;

    margin: 7px 0 0;

    color: #7b7e82;

    font-size: 11px;

    line-height: 1.6;
}


.fi-wds-service-item > b {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border: 1px solid #d3d3d0;

    border-radius: 50%;

    font-weight: 400;

    transition: .3s;
}


.fi-wds-service-item:hover > b {
    background: #ff5d22;

    color: #fff;

    border-color: #ff5d22;

    transform: rotate(45deg);
}


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

.fi-wds-process {
    margin-bottom: 120px;
}


.fi-wds-process-track {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    border-top: 1px solid #d8d8d5;

    border-bottom: 1px solid #d8d8d5;
}


.fi-wds-process-step {
    position: relative;

    min-height: 270px;

    padding: 25px 20px;

    border-right: 1px solid #d8d8d5;
}


.fi-wds-process-step:first-child {
    border-left: 1px solid #d8d8d5;
}


.fi-wds-process-step > span {
    display: block;

    margin-bottom: 65px;

    color: #ff5d22;

    font-size: 10px;

    font-weight: 900;
}


.fi-wds-process-step h3 {
    margin: 0;

    font-size: 16px;

    line-height: 1.2;
}


.fi-wds-process-step p {
    color: #808287;

    font-size: 10px;

    line-height: 1.7;
}


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

.fi-wds-features {
    margin-bottom: 120px;
}


.fi-wds-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    border-top: 1px solid #d8d8d5;

    border-bottom: 1px solid #d8d8d5;
}


.fi-wds-feature-grid > div {
    min-height: 180px;

    padding: 25px 20px;

    border-right: 1px solid #d8d8d5;
}


.fi-wds-feature-grid > div:first-child {
    border-left: 1px solid #d8d8d5;
}


.fi-wds-feature-grid span {
    color: #ff5d22;

    font-size: 9px;

    font-weight: 900;
}


.fi-wds-feature-grid h3 {
    margin: 45px 0 8px;

    font-size: 15px;
}


.fi-wds-feature-grid p {
    margin: 0;

    color: #808287;

    font-size: 10px;

    line-height: 1.6;
}


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

.fi-wds-industries {
    margin-bottom: 120px;
}


.fi-wds-industry-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top: 1px solid #d8d8d5;

    border-left: 1px solid #d8d8d5;
}


.fi-wds-industry-grid > div {
    min-height: 100px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 25px;

    border-right: 1px solid #d8d8d5;

    border-bottom: 1px solid #d8d8d5;

    font-size: 14px;

    font-weight: 700;

    transition: .3s;
}


.fi-wds-industry-grid > div:hover {
    background: #111214;

    color: #fff;
}


.fi-wds-industry-grid span {
    color: #ff5d22;

    font-size: 17px;
}


/* =========================================================
   MATTERS
========================================================= */

.fi-wds-matters {
    display: grid;

    grid-template-columns: 220px 1fr;

    gap: 60px;

    padding: 65px 0;

    border-top: 1px solid #d8d8d5;

    border-bottom: 1px solid #d8d8d5;

    margin-bottom: 80px;
}


.fi-wds-matters-label {
    color: #777a7e;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.fi-wds-matters h2 {
    max-width: 750px;

    margin: 0;

    font-size: 52px;

    line-height: 1;

    letter-spacing: -2.5px;
}


.fi-wds-matters h2 strong {
    color: #ff5d22;
}


.fi-wds-matters p {
    max-width: 700px;

    margin: 25px 0;

    color: #777a7e;

    font-size: 14px;

    line-height: 1.8;
}


.fi-wds-matters-points {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}


.fi-wds-matters-points span {
    padding: 10px 14px;

    border: 1px solid #d7d7d4;

    border-radius: 50px;

    color: #5f6267;

    font-size: 9px;

    font-weight: 700;
}


/* =========================================================
   FINAL CTA
========================================================= */

.fi-wds-final {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 60px;

    background: #17191d;

    color: #fff;
}


.fi-wds-final > div > span {
    color: #ff5d22;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.fi-wds-final h2 {
    max-width: 750px;

    margin: 15px 0 0;

    font-size: 45px;

    line-height: 1;

    letter-spacing: -2px;
}


.fi-wds-final h2 strong {
    color: #ff5d22;
}


.fi-wds-final a {
    flex-shrink: 0;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 7px 8px 7px 20px;

    border-radius: 50px;

    background: #ff5d22;

    color: #fff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;
}


.fi-wds-final a span {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #fff;

    color: #111214;

    font-size: 15px;
}


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

@media (max-width: 1000px) {

    .fi-wds-hero {
        grid-template-columns: 1fr;
    }

    .fi-wds-hero-content {
        padding-right: 0;
        padding-bottom: 50px;
    }

    .fi-wds-hero-visual {
        min-height: 550px;
    }

    .fi-wds-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fi-wds-wide {
        grid-column: span 2;
    }

    .fi-wds-process-track {
        grid-template-columns: repeat(2, 1fr);
    }

    .fi-wds-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .fi-wds-industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 600px) {

    .fi-wds-section {
        padding: 65px 15px;
    }

    .fi-wds-hero {
        margin-bottom: 75px;
    }

    .fi-wds-hero-content {
        padding: 45px 0;
    }

    .fi-wds-hero h1 {
        font-size: 57px;

        letter-spacing: -3px;
    }

    .fi-wds-hero-content > p {
        font-size: 13px;
    }

    .fi-wds-hero-visual {
        min-height: 450px;
    }

    .fi-wds-visual-word {
        font-size: 90px;

        letter-spacing: -7px;
    }

    .fi-orbit-one {
        width: 300px;
        height: 300px;
    }

    .fi-orbit-two {
        width: 220px;
        height: 360px;
    }

    .fi-wds-center-circle {
        width: 95px;
        height: 95px;
    }

    .fi-wds-card-a {
        top: 55px;
        left: 12px;
    }

    .fi-wds-card-b {
        top: 210px;
        right: 10px;
    }

    .fi-wds-card-c {
        bottom: 45px;
        left: 25px;
    }

    .fi-wds-section-heading {
        display: block;
    }

    .fi-wds-section-heading h2 {
        font-size: 37px;
    }

    .fi-wds-section-heading > p {
        margin-top: 20px;
    }

    .fi-wds-why-grid {
        grid-template-columns: 1fr;

        margin-bottom: 75px;
    }

    .fi-wds-wide {
        grid-column: span 1;
    }

    .fi-wds-wide-content {
        display: block;
    }

    .fi-wds-wide .fi-wds-icon {
        margin-bottom: 30px;
    }

    .fi-wds-services,
    .fi-wds-process,
    .fi-wds-features,
    .fi-wds-industries {
        margin-bottom: 75px;
    }

    .fi-wds-service-item {
        grid-template-columns: 35px 1fr 30px;

        gap: 8px;
    }

    .fi-wds-service-item h3 {
        font-size: 14px;
    }

    .fi-wds-process-track {
        grid-template-columns: 1fr;
    }

    .fi-wds-process-step {
        min-height: auto;

        padding: 25px 20px;

        border-right: 0;

        border-bottom: 1px solid #d8d8d5;
    }

    .fi-wds-process-step:first-child {
        border-left: 0;
    }

    .fi-wds-process-step > span {
        margin-bottom: 25px;
    }

    .fi-wds-feature-grid {
        grid-template-columns: 1fr;
    }

    .fi-wds-feature-grid > div {
        border-right: 0;

        border-bottom: 1px solid #d8d8d5;
    }

    .fi-wds-feature-grid > div:first-child {
        border-left: 0;
    }

    .fi-wds-industry-grid {
        grid-template-columns: 1fr;
    }

    .fi-wds-matters {
        grid-template-columns: 1fr;

        gap: 20px;

        padding: 50px 0;
    }

    .fi-wds-matters h2 {
        font-size: 38px;
    }

    .fi-wds-final {
        display: block;

        padding: 40px 25px;
    }

    .fi-wds-final h2 {
        font-size: 34px;
    }

    .fi-wds-final a {
        width: max-content;

        margin-top: 30px;
    }

}


/* ==============================api devlopment ================================ */


/* =========================================================
   FUTURE INFOSYS - MODERN API DEVELOPMENT HERO
========================================================= */

.fi-api-hero {
    position: relative;
    overflow: hidden;

    min-height: 590px;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(41, 104, 255, .18),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(0, 211, 255, .10),
            transparent 30%
        ),
        #07121f;

    color: #fff;
}


/* =========================================================
   GRID BACKGROUND
========================================================= */

.fi-api-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 45px 45px;

    mask-image: linear-gradient(
        to right,
        transparent,
        black 20%,
        black 80%,
        transparent
    );
}


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

.fi-api-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;
}

.fi-api-glow-1 {
    width: 280px;
    height: 280px;

    right: 8%;
    top: 5%;

    background: rgba(50, 105, 255, .18);
}

.fi-api-glow-2 {
    width: 220px;
    height: 220px;

    left: 5%;
    bottom: -100px;

    background: rgba(0, 206, 255, .12);
}


/* =========================================================
   CONTAINER
========================================================= */

.fi-api-container {
    width: 90%;
    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 70px;

    position: relative;

    z-index: 2;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.fi-api-content {
    max-width: 620px;
}


/* TAG */

.fi-api-tag {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 9px 15px;

    border-radius: 50px;

    border: 1px solid rgba(255,255,255,.12);

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

    backdrop-filter: blur(10px);

    color: #8fb6ff;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.fi-api-status {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #39d9a6;

    box-shadow: 0 0 12px #39d9a6;
}


/* HEADING */

.fi-api-content h1 {
    margin: 27px 0 22px;

    font-size: clamp(44px, 5vw, 68px);

    line-height: 1.04;

    letter-spacing: -2.5px;

    font-weight: 800;
}


.fi-api-content h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #fff,
            #76a9ff,
            #36d8ff
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* DESCRIPTION */

.fi-api-content > p {
    max-width: 570px;

    margin-bottom: 32px;

    color: #9aaabd;

    font-size: 16px;

    line-height: 1.8;
}


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

.fi-api-actions {
    display: flex;

    align-items: center;

    gap: 24px;

    flex-wrap: wrap;
}


.fi-api-btn {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    padding: 14px 20px;

    border-radius: 12px;

    text-decoration: none;

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            #386aff,
            #6845ff
        );

    box-shadow:
        0 15px 35px rgba(57,91,255,.25);

    transition: .3s ease;
}


.fi-api-btn span {
    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.15);
}


.fi-api-btn:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 20px 40px rgba(57,91,255,.40);
}


.fi-api-link {
    color: #b7c4d7;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: .3s;
}


.fi-api-link span {
    margin-left: 7px;

    color: #5f91ff;
}


.fi-api-link:hover {
    color: #fff;
}


/* =========================================================
   MINI STATS
========================================================= */

.fi-api-mini-stats {
    display: flex;

    gap: 40px;

    margin-top: 48px;

    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.08);
}


.fi-api-mini-stats div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.fi-api-mini-stats strong {
    font-size: 20px;

    color: #fff;
}


.fi-api-mini-stats small {
    color: #667991;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .8px;
}


/* =========================================================
   RIGHT API VISUAL
========================================================= */

.fi-api-visual {
    position: relative;

    min-height: 460px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   API MAIN CARD
========================================================= */

.fi-api-card {
    width: 490px;

    padding: 0;

    overflow: hidden;

    border-radius: 22px;

    background:
        rgba(12, 25, 43, .88);

    border:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        0 35px 90px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.06);

    backdrop-filter: blur(25px);

    transform:
        perspective(1200px)
        rotateY(-6deg)
        rotateX(2deg);

    transition: .4s ease;
}


.fi-api-card:hover {
    transform:
        perspective(1200px)
        rotateY(0)
        rotateX(0)
        translateY(-5px);
}


/* =========================================================
   CARD HEADER
========================================================= */

.fi-api-card-header {
    height: 54px;

    padding: 0 18px;

    display: flex;

    align-items: center;

    gap: 14px;

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

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


.fi-api-dots {
    display: flex;

    gap: 5px;
}


.fi-api-dots i {
    width: 7px;
    height: 7px;

    display: block;

    border-radius: 50%;

    background: #53657c;
}


.fi-api-card-header > span {
    flex: 1;

    color: #73859c;

    font-size: 11px;

    font-family: monospace;
}


.fi-api-card-header b {
    color: #42d9a7;

    font-size: 9px;

    letter-spacing: 1px;
}


/* =========================================================
   API REQUEST
========================================================= */

.fi-api-request {
    padding: 25px;
}


.fi-api-method {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;
}


.fi-api-method span {
    padding: 5px 9px;

    border-radius: 6px;

    background: rgba(48,214,157,.12);

    color: #40d6a3;

    font-size: 10px;

    font-weight: 800;
}


.fi-api-method code {
    color: #94a7bd;

    font-size: 12px;
}


/* CODE */

.fi-api-code {
    padding: 18px;

    border-radius: 12px;

    background: #081321;

    border: 1px solid rgba(255,255,255,.06);
}


.fi-api-code pre {
    margin: 0;

    white-space: pre-wrap;

    font-family: "Courier New", monospace;

    font-size: 12px;

    line-height: 1.8;

    color: #b9c7d8;
}


.code-purple {
    color: #c792ea;
}


.code-blue {
    color: #82aaff;
}


.code-green {
    color: #c3e88d;
}


.code-orange {
    color: #ffcb6b;
}


/* =========================================================
   RESPONSE
========================================================= */

.fi-api-response {
    margin: 0 25px 20px;

    padding: 17px;

    border-radius: 12px;

    background: rgba(56,217,169,.035);

    border: 1px solid rgba(56,217,169,.10);
}


.fi-response-title {
    display: flex;

    justify-content: space-between;

    margin-bottom: 13px;

    font-size: 11px;

    color: #71839a;
}


.fi-response-title strong {
    color: #3ed5a4;

    font-size: 10px;
}


.fi-response-line {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 8px;

    color: #8da0b5;

    font-size: 10px;
}


.fi-response-line span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #3ed5a4;

    box-shadow: 0 0 7px #3ed5a4;
}


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

.fi-api-card-footer {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    padding: 17px 25px;

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

    border-top:
        1px solid rgba(255,255,255,.06);
}


.fi-api-card-footer div {
    border-right:
        1px solid rgba(255,255,255,.07);

    padding-left: 15px;
}


.fi-api-card-footer div:first-child {
    padding-left: 0;
}


.fi-api-card-footer div:last-child {
    border-right: 0;
}


.fi-api-card-footer small {
    display: block;

    color: #63758c;

    font-size: 9px;

    margin-bottom: 4px;
}


.fi-api-card-footer strong {
    color: #dce7f5;

    font-size: 12px;
}


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

.fi-api-floating {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 13px 15px;

    min-width: 175px;

    border-radius: 14px;

    background:
        rgba(14, 28, 47, .92);

    border:
        1px solid rgba(255,255,255,.11);

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

    backdrop-filter: blur(15px);

    z-index: 5;
}


.fi-api-floating small {
    display: block;

    color: #667a92;

    font-size: 9px;
}


.fi-api-floating strong {
    display: block;

    margin-top: 3px;

    color: #fff;

    font-size: 13px;
}


.fi-floating-icon {
    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: rgba(66,103,255,.13);

    color: #7da3ff;

    font-size: 17px;
}


.fi-check {
    margin-left: auto;

    color: #40d7a5;

    font-weight: bold;
}


.fi-api-floating-top {
    top: 42px;

    right: -15px;
}


.fi-api-floating-bottom {
    bottom: 45px;

    left: -20px;
}


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

@media (max-width: 1050px) {

    .fi-api-container {
        gap: 35px;
    }

    .fi-api-card {
        width: 440px;
    }

}


@media (max-width: 991px) {

    .fi-api-hero {
        padding: 75px 0;
    }

    .fi-api-container {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .fi-api-content {
        max-width: 700px;

        margin: auto;
    }

    .fi-api-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .fi-api-actions {
        justify-content: center;
    }

    .fi-api-mini-stats {
        justify-content: center;
    }

    .fi-api-visual {
        width: 100%;

        margin-top: 25px;
    }

}


@media (max-width: 600px) {

    .fi-api-hero {
        min-height: auto;

        padding: 60px 0;
    }

    .fi-api-content h1 {
        font-size: 40px;

        letter-spacing: -1.5px;
    }

    .fi-api-content > p {
        font-size: 14px;
    }

    .fi-api-card {
        width: 100%;

        transform: none;
    }

    .fi-api-card:hover {
        transform: none;
    }

    .fi-api-visual {
        min-height: 390px;
    }

    .fi-api-floating {
        display: none;
    }

    .fi-api-mini-stats {
        gap: 20px;
    }

    .fi-api-mini-stats strong {
        font-size: 17px;
    }

    .fi-api-mini-stats small {
        font-size: 8px;
    }

    .fi-api-code pre {
        font-size: 10px;
    }

}


@media (max-width: 400px) {

    .fi-api-mini-stats {
        display: grid;

        grid-template-columns:
            repeat(3, 1fr);
    }

    .fi-api-mini-stats div {
        align-items: center;
    }

}


/* ============================================================
   FUTURE INFOSYS - API DEVELOPMENT
   MODERN CORPORATE DESIGN
============================================================ */

.fi-api-section {
    position: relative;
    overflow: hidden;

    padding: 90px 0 100px;

    background:
        linear-gradient(
            135deg,
            #f4f9fd 0%,
            #edf7fc 55%,
            #f7fbfe 100%
        );

    color: #17364f;
}


/* ============================================================
   DOT BACKGROUND
============================================================ */

.fi-api-bg-dots {
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            #c7deed 1.1px,
            transparent 1.1px
        );

    background-size: 9px 9px;

    opacity: .45;

    pointer-events: none;
}


/* ============================================================
   BACKGROUND CIRCLES
============================================================ */

.fi-api-bg-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.fi-circle-one {
    width: 500px;
    height: 500px;

    right: -280px;
    top: 100px;

    border: 1px solid rgba(38,137,194,.08);
}

.fi-circle-two {
    width: 350px;
    height: 350px;

    left: -220px;
    bottom: 100px;

    border: 1px solid rgba(38,137,194,.06);
}


/* ============================================================
   INTRO
============================================================ */

.fi-api-intro {
    position: relative;
    z-index: 2;

    max-width: 850px;

    margin: 0 auto 65px;

    text-align: center;
}


.fi-api-label {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 8px 16px;

    border-radius: 50px;

    background: #e3f2fb;

    border: 1px solid #c9e3f1;

    color: #1678b5;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


.fi-api-label span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #1bad7e;

    box-shadow:
        0 0 0 4px rgba(27,173,126,.10);
}


.fi-api-intro h1 {
    margin: 22px 0 18px;

    color: #173b58;

    font-size: clamp(38px, 5vw, 60px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 800;
}


.fi-api-intro h1 strong {
    display: block;

    color: #147fbd;

    font-weight: 800;
}


.fi-api-intro p {
    max-width: 760px;

    margin: auto;

    color: #698195;

    font-size: 15px;

    line-height: 1.85;
}


/* ============================================================
   MAIN CARD
============================================================ */

.fi-api-card {
    position: relative;
    z-index: 2;

    padding: 30px;

    margin-bottom: 30px;

    border-radius: 20px;

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

    border: 1px solid #d9e8f1;

    box-shadow:
        0 18px 55px rgba(35,91,125,.08);

    backdrop-filter: blur(10px);
}


/* ============================================================
   SECTION HEADING
============================================================ */

.fi-section-heading {
    display: flex;

    align-items: center;

    gap: 15px;

    padding-bottom: 22px;

    margin-bottom: 25px;

    border-bottom: 1px solid #e3edf3;
}


.fi-number {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #e6f5fc,
            #d8eef9
        );

    color: #147fbd;

    font-size: 12px;

    font-weight: 800;
}


.fi-section-heading small {
    display: block;

    color: #78a0b6;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.4px;

    margin-bottom: 3px;
}


.fi-section-heading h2 {
    margin: 0;

    color: #1a3b54;

    font-size: 23px;

    font-weight: 750;
}


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

.fi-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 14px;
}


.fi-feature-item {
    position: relative;

    display: flex;

    gap: 13px;

    padding: 18px;

    border-radius: 14px;

    background: #f7fbfd;

    border: 1px solid #e2edf3;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


.fi-feature-item:hover {
    transform: translateY(-4px);

    border-color: #bcddec;

    box-shadow:
        0 12px 30px rgba(27,105,145,.09);

    background: #ffffff;
}


.fi-feature-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 9px;

    background: #e6f4fb;

    color: #1681bf;

    font-size: 10px;

    font-weight: 800;
}


.fi-feature-item h3 {
    margin: 2px 0 7px;

    color: #1d435e;

    font-size: 14px;

    font-weight: 750;
}


.fi-feature-item p {
    margin: 0 0 8px;

    color: #70879a;

    font-size: 11px;

    line-height: 1.65;
}


.fi-feature-item ul {
    margin: 0;

    padding: 0;

    list-style: none;
}


.fi-feature-item li {
    position: relative;

    padding-left: 13px;

    margin-top: 4px;

    color: #7890a2;

    font-size: 10px;

    line-height: 1.5;
}


.fi-feature-item li::before {
    content: "›";

    position: absolute;

    left: 0;

    color: #1686c4;

    font-weight: 800;
}


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

.fi-process {
    position: relative;

    padding-left: 5px;
}


.fi-process::before {
    content: "";

    position: absolute;

    left: 20px;
    top: 10px;
    bottom: 10px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            #b8dcec,
            transparent
        );
}


.fi-process-item {
    position: relative;

    display: flex;

    gap: 18px;

    margin-bottom: 23px;
}


.fi-process-item:last-child {
    margin-bottom: 0;
}


.fi-process-item > span {
    position: relative;

    z-index: 2;

    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid #cce4f0;

    color: #147fbd;

    font-size: 10px;

    font-weight: 800;
}


.fi-process-item h3 {
    margin: 3px 0 5px;

    color: #1c4059;

    font-size: 14px;

    font-weight: 750;
}


.fi-process-item p {
    margin: 0;

    color: #71879a;

    font-size: 11px;

    line-height: 1.7;
}


/* ============================================================
   RIGHT SIDE
============================================================ */

.fi-api-side {
    position: sticky;

    top: 30px;
}


/* ============================================================
   API VISUAL
============================================================ */

.fi-api-visual {
    position: relative;

    height: 390px;

    margin-bottom: 25px;

    border-radius: 22px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #eaf6fc,
            #f8fcfe
        );

    border: 1px solid #d4e7f1;

    box-shadow:
        0 20px 55px rgba(38,103,138,.09);
}


.fi-api-visual::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            #bcdceb 1px,
            transparent 1px
        );

    background-size: 8px 8px;

    opacity: .35;
}


/* ============================================================
   RINGS
============================================================ */

.fi-api-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    border: 1px dashed #b8d9e9;
}


.ring-one {
    width: 190px;
    height: 190px;
}


.ring-two {
    width: 300px;
    height: 300px;

    border-color: #d1e6f0;
}


/* ============================================================
   API CORE
============================================================ */

.fi-api-core {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 105px;
    height: 105px;

    display: flex;

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

    flex-direction: column;

    border-radius: 50%;

    background: #ffffff;

    border: 8px solid #e5f4fa;

    box-shadow:
        0 15px 40px rgba(36,106,143,.15);

    z-index: 5;
}


.fi-api-core span {
    color: #147fbd;

    font-size: 27px;

    font-weight: 800;
}


.fi-api-core small {
    color: #82a0b2;

    font-size: 7px;

    letter-spacing: 2px;
}


/* ============================================================
   API NODES
============================================================ */

.fi-api-node {
    position: absolute;

    width: 105px;

    padding: 12px;

    text-align: center;

    border-radius: 12px;

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

    border: 1px solid #d5e7f0;

    box-shadow:
        0 10px 30px rgba(33,100,135,.10);

    z-index: 6;
}


.fi-api-node strong {
    display: block;

    color: #1a80bb;

    font-size: 13px;
}


.fi-api-node small {
    color: #8298a8;

    font-size: 8px;
}


.node-top {
    top: 28px;

    left: 50%;

    transform: translateX(-50%);
}


.node-right {
    right: 25px;

    top: 50%;

    transform: translateY(-50%);
}


.node-bottom {
    bottom: 28px;

    left: 50%;

    transform: translateX(-50%);
}


.node-left {
    left: 25px;

    top: 50%;

    transform: translateY(-50%);
}


/* ============================================================
   COURIER CARD
============================================================ */

.fi-courier-card {
    padding: 22px;

    margin-bottom: 20px;

    border-radius: 18px;

    background: #ffffff;

    border: 1px solid #dceaf2;

    box-shadow:
        0 15px 40px rgba(35,95,130,.07);
}


.fi-courier-header {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 15px;

    margin-bottom: 14px;

    border-bottom: 1px solid #e7eff4;
}


.fi-courier-header small {
    display: block;

    color: #80a0b2;

    font-size: 8px;

    letter-spacing: 1.2px;

    font-weight: 700;
}


.fi-courier-header h3 {
    margin: 3px 0 0;

    color: #1c4059;

    font-size: 17px;
}


.fi-live-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #20b486;

    box-shadow:
        0 0 0 5px rgba(32,180,134,.10);
}


.fi-courier-list {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 8px;
}


.fi-courier-list div {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 11px;

    border-radius: 9px;

    background: #f5f9fb;

    border: 1px solid #e7eff4;
}


.fi-courier-list b {
    color: #34556d;

    font-size: 10px;
}


.fi-courier-list span {
    color: #24a67f;

    font-size: 8px;

    font-weight: 600;
}


/* ============================================================
   ADDON CARD
============================================================ */

.fi-addon-card {
    padding: 22px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #17466a,
            #126d9c
        );

    color: #ffffff;

    box-shadow:
        0 18px 45px rgba(23,76,108,.16);
}


.fi-addon-title {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}


.fi-addon-title > span {
    width: 37px;
    height: 37px;

    display: flex;

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

    border-radius: 10px;

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

    font-size: 22px;
}


.fi-addon-title small {
    display: block;

    color: #9bc6dc;

    font-size: 8px;

    letter-spacing: 1.1px;
}


.fi-addon-title h3 {
    margin: 3px 0 0;

    font-size: 16px;

    color: #ffffff;
}


.fi-addon-item {
    padding-top: 13px;

    margin-top: 13px;

    border-top: 1px solid rgba(255,255,255,.10);
}


.fi-addon-item strong {
    display: block;

    font-size: 12px;

    color: #ffffff;
}


.fi-addon-item p {
    margin: 5px 0 0;

    color: #b8d4e3;

    font-size: 10px;

    line-height: 1.6;
}


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

@media (max-width: 991px) {

    .fi-api-section {
        padding: 65px 0 75px;
    }

    .fi-api-intro {
        margin-bottom: 45px;
    }

    .fi-api-side {
        position: relative;

        top: auto;

        margin-top: 10px;
    }

}


@media (max-width: 767px) {

    .fi-api-section {
        padding: 50px 0 60px;
    }

    .fi-api-intro h1 {
        font-size: 38px;

        letter-spacing: -1.3px;
    }

    .fi-api-intro p {
        font-size: 13px;
    }

    .fi-api-card {
        padding: 20px;
    }

    .fi-feature-grid {
        grid-template-columns: 1fr;
    }

    .fi-section-heading h2 {
        font-size: 19px;
    }

    .fi-api-visual {
        height: 350px;
    }

}


@media (max-width: 480px) {

    .fi-api-intro h1 {
        font-size: 32px;
    }

    .fi-api-label {
        font-size: 9px;
    }

    .fi-api-card {
        padding: 16px;
    }

    .fi-courier-card,
    .fi-addon-card {
        padding: 17px;
    }

    .fi-courier-list {
        grid-template-columns: 1fr;
    }

    .fi-api-node {
        width: 82px;

        padding: 9px;
    }

    .fi-api-node strong {
        font-size: 11px;
    }

    .fi-api-node small {
        font-size: 7px;
    }

    .node-left {
        left: 10px;
    }

    .node-right {
        right: 10px;
    }

}


/* 
===========================worldpress============================== */


/* ============================================================
   FUTURE INFOSYS
   MODERN WEBSITE DESIGNING SECTION
============================================================ */


/* ============================================================
   MAIN SECTION
============================================================ */

.fi-web-design-section {
    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background:
        linear-gradient(
            135deg,
            #f1f8fc 0%,
            #eaf5fb 50%,
            #f8fbfd 100%
        );

    color: #173a53;
}


/* ============================================================
   BACKGROUND DOTS
============================================================ */

.fi-web-design-section::before {
    content: "";

    position: absolute;

    inset: 0;

    background-image:
        radial-gradient(
            rgba(43, 133, 180, .18) 1px,
            transparent 1px
        );

    background-size: 9px 9px;

    opacity: .5;

    pointer-events: none;
}


/* ============================================================
   LIGHT BACKGROUND GLOW
============================================================ */

.fi-web-design-section::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -250px;
    top: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(39, 151, 211, .13),
            transparent 68%
        );

    pointer-events: none;
}


/* ============================================================
   CONTAINER
============================================================ */

.fi-web-design-container {
    position: relative;

    z-index: 2;

    width: 90%;

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns:
        45% 55%;

    align-items: center;

    gap: 25px;
}


/* ============================================================
   LEFT SIDE
============================================================ */

.fi-web-design-content {
    padding-right: 25px;
}


/* LABEL */

.fi-web-design-label {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 9px 16px;

    border-radius: 50px;

    background: #e2f2fa;

    border: 1px solid #c8e2ef;

    color: #167bb7;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.fi-web-design-label span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #19ae80;

    box-shadow:
        0 0 0 4px rgba(25,174,128,.10);
}


/* HEADING */

.fi-web-design-content h1 {
    margin: 25px 0 20px;

    color: #173b56;

    font-size: clamp(44px, 5vw, 66px);

    line-height: 1.06;

    letter-spacing: -2.5px;

    font-weight: 800;
}


.fi-web-design-content h1 span {
    display: block;

    color: #147fbd;
}


/* DESCRIPTION */

.fi-web-design-content > p {
    max-width: 550px;

    margin-bottom: 30px;

    color: #667f93;

    font-size: 15px;

    line-height: 1.85;
}


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

.fi-web-design-actions {
    display: flex;

    align-items: center;

    gap: 13px;

    flex-wrap: wrap;
}


.fi-web-primary-btn {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding: 14px 20px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #1479ba,
            #1ba4d5
        );

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 13px 30px rgba(20,125,188,.22);

    transition: .3s ease;
}


.fi-web-primary-btn:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 18px 38px rgba(20,125,188,.30);
}


.fi-web-primary-btn span {
    width: 25px;
    height: 25px;

    display: flex;

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

    border-radius: 50%;

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

    font-size: 15px;
}


.fi-web-secondary-btn {
    padding: 13px 19px;

    border-radius: 9px;

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

    border: 1px solid #c9dfe9;

    color: #35576d;

    font-size: 12px;

    font-weight: 600;

    transition: .3s ease;
}


.fi-web-secondary-btn:hover {
    background: #fff;

    color: #147fbd;

    border-color: #9dcbe0;
}


/* ============================================================
   STATS
============================================================ */

.fi-web-stats {
    display: flex;

    gap: 35px;

    margin-top: 42px;

    padding-top: 23px;

    border-top: 1px solid #d6e6ef;
}


.fi-web-stat {
    display: flex;

    flex-direction: column;

    gap: 5px;
}


.fi-web-stat strong {
    color: #173d58;

    font-size: 21px;

    font-weight: 800;
}


.fi-web-stat span {
    color: #7890a2;

    font-size: 8px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .6px;
}


/* ============================================================
   RIGHT VISUAL
============================================================ */

.fi-web-design-visual {
    position: relative;

    height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* ============================================================
   ORBITS
============================================================ */

.fi-web-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    border: 1px dashed #c5dfe9;
}


.orbit-1 {
    width: 470px;
    height: 470px;
}


.orbit-2 {
    width: 350px;
    height: 350px;

    border-color: #d6e8f0;
}


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

.fi-web-top-badge {
    position: absolute;

    right: 55px;
    top: 25px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 9px 13px;

    border-radius: 8px;

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

    border: 1px solid #d7e7ef;

    box-shadow:
        0 10px 25px rgba(30,91,124,.09);

    color: #618197;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .7px;
}


.fi-web-top-badge span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #19ad80;
}


/* ============================================================
   WEBSITE MOCKUP
============================================================ */

.fi-website-mockup {
    position: relative;

    width: 550px;

    overflow: hidden;

    border-radius: 18px;

    background: #fff;

    border: 1px solid #d6e6ee;

    box-shadow:
        0 30px 80px rgba(28,83,113,.16);

    z-index: 5;

    transform:
        perspective(1400px)
        rotateY(-5deg);

    transition: .45s ease;
}


.fi-website-mockup:hover {
    transform:
        perspective(1400px)
        rotateY(0deg)
        translateY(-5px);
}


/* ============================================================
   BROWSER HEADER
============================================================ */

.fi-browser-header {
    height: 43px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 0 14px;

    background: #f5f8fa;

    border-bottom: 1px solid #e2ebef;
}


.fi-browser-controls {
    display: flex;

    gap: 5px;
}


.fi-browser-controls i {
    width: 7px;
    height: 7px;

    display: block;

    border-radius: 50%;

    background: #c4d3dc;
}


.fi-browser-address {
    flex: 1;

    height: 23px;

    display: flex;

    align-items: center;

    padding: 0 9px;

    border-radius: 5px;

    background: #fff;

    border: 1px solid #e0e9ed;

    color: #7f96a5;

    font-size: 8px;
}


.fi-browser-more {
    color: #8ba0ac;

    font-size: 11px;
}


/* ============================================================
   WEBSITE SCREEN
============================================================ */

.fi-website-screen {
    padding: 18px 20px 20px;

    background: #fff;
}


/* ============================================================
   DEMO NAVIGATION
============================================================ */

.fi-demo-navigation {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 16px;

    border-bottom: 1px solid #edf2f5;
}


.fi-demo-logo {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #173c57;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


.fi-demo-logo span {
    width: 18px;
    height: 18px;

    border-radius: 5px;

    background:
        linear-gradient(
            135deg,
            #167dbd,
            #28b6df
        );
}


.fi-demo-navigation-links {
    display: flex;

    gap: 18px;

    color: #7b909f;

    font-size: 7px;

    font-weight: 600;
}


.fi-demo-nav-button {
    padding: 7px 11px;

    border-radius: 5px;

    background: #e9f6fb;

    color: #167eb9;

    font-size: 7px;

    font-weight: 700;
}


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

.fi-demo-website-hero {
    min-height: 285px;

    display: grid;

    grid-template-columns:
        42% 58%;

    align-items: center;
}


/* TEXT */

.fi-demo-website-content {
    padding-left: 10px;
}


.fi-demo-website-content > small {
    color: #1b9dcc;

    font-size: 6px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.fi-demo-website-content h2 {
    margin: 11px 0;

    color: #173c57;

    font-size: 38px;

    line-height: .95;

    letter-spacing: -1.8px;

    font-weight: 800;
}


.fi-demo-website-content h2 span {
    color: #63869a;
}


.fi-demo-website-content h2 b {
    display: block;

    color: #1684c0;
}


.fi-demo-website-content p {
    max-width: 160px;

    margin: 10px 0 14px;

    color: #8196a3;

    font-size: 7px;

    line-height: 1.6;
}


.fi-demo-explore {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 10px;

    border-radius: 5px;

    background: #173f5b;

    color: #fff;

    font-size: 7px;

    font-weight: 600;
}


.fi-demo-explore span {
    color: #5bc9e7;

    font-size: 10px;
}


/* ============================================================
   DESIGN ART
============================================================ */

.fi-demo-design {
    position: relative;

    height: 285px;

    overflow: hidden;
}


.fi-design-glow {
    position: absolute;

    width: 220px;
    height: 220px;

    right: 15px;
    top: 30px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #d9f2fa,
            #edf8fc 60%,
            transparent 70%
        );
}


/* BIG CIRCLE */

.fi-design-circle {
    position: absolute;

    width: 210px;
    height: 210px;

    right: 15px;
    top: 38px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #dff4fa,
            #bfe6f1
        );
}


/* BLUE SHAPE */

.fi-design-circle::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: 25px;
    top: 45px;

    border-radius: 20px;

    transform: rotate(18deg);

    background:
        linear-gradient(
            135deg,
            #1683be,
            #28b9df
        );
}


/* DESIGN WINDOW */

.fi-design-window {
    position: absolute;

    width: 190px;
    height: 135px;

    right: 32px;
    top: 82px;

    z-index: 4;

    overflow: hidden;

    border-radius: 9px;

    background: #fff;

    border: 1px solid #dce9ef;

    box-shadow:
        0 16px 35px rgba(35,90,120,.16);

    transform: rotate(-6deg);
}


.fi-design-window-top {
    height: 22px;

    display: flex;

    align-items: center;

    gap: 4px;

    padding-left: 8px;

    background: #f7f9fa;

    border-bottom: 1px solid #edf2f5;
}


.fi-design-window-top span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #bdccd4;
}


.fi-design-window-body {
    padding: 14px;
}


.fi-design-heading {
    width: 75px;
    height: 6px;

    border-radius: 4px;

    background: #187fba;

    margin-bottom: 6px;
}


.fi-design-heading.small {
    width: 48px;

    background: #d0e0e7;
}


.fi-design-image {
    height: 35px;

    margin-top: 10px;

    border-radius: 5px;

    background:
        linear-gradient(
            135deg,
            #dff3f9,
            #70c9e3
        );
}


.fi-design-lines {
    display: flex;

    gap: 5px;

    margin-top: 9px;
}


.fi-design-lines i {
    width: 32px;
    height: 5px;

    border-radius: 4px;

    background: #dce8ed;
}


.fi-design-lines i:first-child {
    background: #1782bd;
}


/* UI CARD */

.fi-design-small-card {
    position: absolute;

    right: 170px;
    top: 35px;

    z-index: 7;

    min-width: 70px;

    padding: 9px 11px;

    border-radius: 8px;

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

    border: 1px solid #d9e8ef;

    box-shadow:
        0 10px 25px rgba(30,88,118,.12);

    transform: rotate(5deg);
}


.fi-design-small-card small {
    display: block;

    color: #8297a5;

    font-size: 6px;
}


.fi-design-small-card strong {
    display: block;

    color: #1682bd;

    font-size: 16px;

    margin-top: 2px;
}


.fi-design-small-card span {
    color: #8aa0ac;

    font-size: 6px;
}


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

.fi-demo-bottom {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

    padding-top: 14px;

    border-top: 1px solid #edf2f5;
}


.fi-demo-bottom div {
    padding: 9px;

    border-radius: 7px;

    background: #f7fafb;
}


.fi-demo-bottom span {
    display: block;

    color: #a0b1bb;

    font-size: 6px;

    margin-bottom: 4px;
}


.fi-demo-bottom strong {
    color: #3b596c;

    font-size: 7px;
}


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

.fi-web-floating-card {
    position: absolute;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 14px;

    border-radius: 11px;

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

    border: 1px solid #d6e6ee;

    box-shadow:
        0 15px 35px rgba(35,94,126,.13);

    backdrop-filter: blur(10px);
}


.fi-floating-icon {
    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 8px;

    background: #e7f5fb;

    color: #1684bd;

    font-size: 14px;

    font-weight: 800;
}


.fi-web-floating-card strong {
    display: block;

    color: #24475e;

    font-size: 9px;
}


.fi-web-floating-card small {
    display: block;

    margin-top: 3px;

    color: #8298a6;

    font-size: 7px;
}


/* LEFT FLOAT */

.floating-left {
    left: -10px;

    top: 115px;
}


/* RIGHT FLOAT */

.floating-right {
    right: -5px;

    bottom: 125px;
}


/* ============================================================
   LIVE CARD
============================================================ */

.fi-web-live-card {
    position: absolute;

    z-index: 10;

    right: 50px;
    top: 55px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 13px;

    border-radius: 9px;

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

    border: 1px solid #d9e8ef;

    box-shadow:
        0 12px 30px rgba(35,91,122,.11);
}


.fi-web-live-card strong {
    display: block;

    color: #294b61;

    font-size: 8px;
}


.fi-web-live-card small {
    display: block;

    margin-top: 3px;

    color: #879ba8;

    font-size: 6px;
}


.fi-live-dot {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #1bad7f;

    box-shadow:
        0 0 0 4px rgba(27,173,127,.10);
}


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

@media (max-width: 1100px) {

    .fi-web-design-container {
        grid-template-columns:
            44% 56%;
    }

    .fi-website-mockup {
        width: 500px;
    }

    .floating-left {
        left: -20px;
    }

    .floating-right {
        right: -20px;
    }

}


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

@media (max-width: 991px) {

    .fi-web-design-section {
        padding: 75px 0;
    }

    .fi-web-design-container {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .fi-web-design-content {
        padding-right: 0;

        max-width: 700px;

        margin: auto;
    }

    .fi-web-design-content > p {
        margin-left: auto;
        margin-right: auto;
    }

    .fi-web-design-actions {
        justify-content: center;
    }

    .fi-web-stats {
        justify-content: center;
    }

    .fi-web-design-visual {
        margin-top: 25px;
    }

}


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

@media (max-width: 650px) {

    .fi-web-design-section {
        padding: 55px 0;
    }

    .fi-web-design-content h1 {
        font-size: 39px;

        letter-spacing: -1.5px;
    }

    .fi-web-design-content > p {
        font-size: 13px;
    }

    .fi-web-design-visual {
        height: 420px;
    }

    .fi-website-mockup {
        width: 100%;

        transform: none;
    }

    .fi-website-mockup:hover {
        transform: none;
    }

    .fi-web-orbit {
        display: none;
    }

    .fi-web-top-badge {
        right: 10px;

        top: 5px;
    }

    .fi-demo-navigation-links {
        display: none;
    }

    .fi-demo-website-hero {
        min-height: 230px;
    }

    .fi-demo-website-content h2 {
        font-size: 29px;
    }

    .fi-demo-design {
        height: 230px;
    }

    .fi-design-circle {
        width: 170px;
        height: 170px;

        top: 30px;
    }

    .fi-design-circle::after {
        width: 95px;
        height: 95px;
    }

    .fi-design-window {
        width: 155px;
        height: 110px;

        right: 15px;
        top: 65px;
    }

    .fi-design-small-card {
        right: 130px;

        top: 30px;
    }

    .fi-web-floating-card,
    .fi-web-live-card {
        display: none;
    }

}


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

@media (max-width: 450px) {

    .fi-web-design-content h1 {
        font-size: 33px;
    }

    .fi-web-stats {
        gap: 17px;
    }

    .fi-web-stat strong {
        font-size: 17px;
    }

    .fi-web-stat span {
        font-size: 7px;
    }

    .fi-website-screen {
        padding: 13px;
    }

    .fi-demo-website-hero {
        grid-template-columns: 45% 55%;
    }

    .fi-demo-website-content {
        padding-left: 3px;
    }

    .fi-demo-website-content h2 {
        font-size: 24px;
    }

    .fi-demo-website-content p {
        font-size: 6px;
    }

    .fi-demo-bottom {
        gap: 5px;
    }

    .fi-demo-bottom div {
        padding: 7px;
    }

}




/* ====================================wordpresscss =================================== */


/* ==========================================
   MODERN WORDPRESS SECTION
========================================== */

.fi-wp-modern {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(0, 170, 230, .12),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(0, 110, 190, .08),
            transparent 30%
        ),
        #edf7fc;
}


/* DOT BACKGROUND */

.fi-wp-modern::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(24, 115, 155, .16) 1px,
            transparent 1px
        );

    background-size: 28px 28px;

    opacity: .35;
}


/* CONTAINER */

.fi-wp-container {
    position: relative;
    z-index: 2;

    width: 92%;
    max-width: 1400px;

    min-height: 620px;

    margin: auto;

    display: grid;
    grid-template-columns: 46% 54%;

    align-items: center;
}


/* ==========================================
   LEFT
========================================== */

.fi-wp-left {
    padding-right: 50px;
}


/* TAG */

.fi-wp-tag {
    width: fit-content;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 8px 15px 8px 8px;

    border-radius: 50px;

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

    border: 1px solid rgba(0,120,180,.14);

    color: #087cb8;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.3px;

    box-shadow: 0 10px 30px rgba(0,80,120,.06);
}


.fi-wp-tag-icon {
    width: 29px;
    height: 29px;

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

    border-radius: 8px;

    color: #fff;

    background: #087fc1;

    font-size: 13px;
}


/* HEADING */

.fi-wp-left h1 {
    margin: 28px 0 20px;

    max-width: 650px;

    color: #12394c;

    font-size: clamp(48px, 5vw, 76px);

    line-height: 1.02;

    letter-spacing: -3px;

    font-weight: 800;
}


.fi-wp-left h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #087fc1,
            #00b6df
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* DESCRIPTION */

.fi-wp-left > p {
    max-width: 570px;

    color: #637f8d;

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 30px;
}


/* BUTTONS */

.fi-wp-buttons {
    display: flex;
    align-items: center;
    gap: 25px;

    margin-bottom: 45px;
}


.fi-wp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    padding: 15px 22px;

    color: #fff;

    text-decoration: none;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #087fc1,
            #00a9dc
        );

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

    box-shadow:
        0 15px 35px rgba(0,130,200,.25);

    transition: .3s ease;
}


.fi-wp-btn-primary span {
    font-size: 19px;
}


.fi-wp-btn-primary:hover {
    color: #fff;
    transform: translateY(-3px);

    box-shadow:
        0 20px 45px rgba(0,130,200,.32);
}


.fi-wp-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #315b6d;

    text-decoration: none;

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

    transition: .3s ease;
}


.fi-wp-btn-link span {
    font-size: 18px;
}


.fi-wp-btn-link:hover {
    color: #087fc1;
}


/* TRUST */

.fi-wp-trust {
    display: flex;
    gap: 25px;
}


.fi-wp-trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
}


.fi-wp-check {
    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    color: #0787c8;

    background: #fff;

    border: 1px solid #dcecf2;

    box-shadow: 0 7px 20px rgba(0,80,120,.06);
}


.fi-wp-trust-item strong {
    display: block;

    color: #23495a;

    font-size: 11px;
}


.fi-wp-trust-item small {
    display: block;

    margin-top: 3px;

    color: #8aa0aa;

    font-size: 9px;
}


/* ==========================================
   RIGHT SIDE
========================================== */

.fi-wp-right {
    position: relative;

    height: 600px;

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


/* GLOW */

.fi-wp-glow {
    position: absolute;

    width: 480px;
    height: 480px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,170,230,.16),
            transparent 68%
        );
}


/* ==========================================
   MAIN CARD
========================================== */

.fi-wp-main-card {
    position: relative;
    z-index: 3;

    width: 620px;
    max-width: 90%;

    overflow: hidden;

    border-radius: 24px;

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

    border: 1px solid rgba(255,255,255,.95);

    box-shadow:
        0 35px 80px rgba(25,80,110,.18),
        0 8px 25px rgba(30,100,140,.07);

    backdrop-filter: blur(18px);
}


/* HEADER */

.fi-wp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 22px;

    border-bottom: 1px solid #e7f0f4;
}


.fi-wp-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}


.fi-wp-brand-logo {
    width: 38px;
    height: 38px;

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

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #087fc1,
            #00a9dc
        );

    font-size: 19px;
    font-weight: 800;
}


.fi-wp-brand strong {
    display: block;

    color: #183f51;

    font-size: 13px;
}


.fi-wp-brand small {
    display: block;

    margin-top: 3px;

    color: #91a3ac;

    font-size: 9px;
}


.fi-wp-status {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px 11px;

    border-radius: 50px;

    color: #0a9b71;

    background: #eafaf5;

    font-size: 8px;
    font-weight: 800;
}


.fi-wp-status span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #10b983;
}


/* ==========================================
   WEBSITE PREVIEW
========================================== */

.fi-wp-preview {
    margin: 18px;

    overflow: hidden;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #effaff,
            #ffffff
        );

    border: 1px solid #e0eef3;
}


/* PREVIEW NAV */

.fi-wp-preview-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 17px 20px;

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

    border-bottom: 1px solid #e5f0f4;
}


.fi-wp-mini-logo {
    color: #123f54;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1px;
}


.fi-wp-mini-menu {
    display: flex;
    gap: 5px;
}


.fi-wp-mini-menu i {
    display: block;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #a7bbc4;
}


/* PREVIEW CONTENT */

.fi-wp-preview-content {
    min-height: 285px;

    display: grid;
    grid-template-columns: 48% 52%;

    align-items: center;

    padding: 28px;
}


/* COPY */

.fi-wp-preview-copy small {
    color: #0788c8;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.2px;
}


.fi-wp-preview-copy h2 {
    margin: 11px 0;

    color: #193e50;

    font-size: 31px;
    line-height: 1.05;

    font-weight: 800;
}


.fi-wp-preview-copy h2 span {
    color: #078bc9;
}


.fi-wp-preview-copy p {
    max-width: 210px;

    color: #78909c;

    font-size: 9px;

    line-height: 1.7;
}


.fi-wp-mini-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 12px;

    padding: 9px 13px;

    border-radius: 7px;

    color: #fff;

    background: #087fc1;

    font-size: 8px;
    font-weight: 700;
}


.fi-wp-mini-action span {
    font-size: 13px;
}


/* ==========================================
   ABSTRACT ART
========================================== */

.fi-wp-art {
    position: relative;

    height: 230px;
}


.fi-wp-art-circle {
    position: absolute;

    width: 190px;
    height: 190px;

    right: 15px;
    top: 15px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #d8f4ff,
            #a7e2f7
        );
}


.fi-wp-art-window {
    position: absolute;

    z-index: 2;

    width: 230px;
    height: 155px;

    right: 30px;
    top: 50px;

    overflow: hidden;

    border-radius: 13px;

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

    transform: rotate(-6deg);

    box-shadow:
        0 20px 40px rgba(20,90,120,.17);
}


.fi-wp-art-top {
    height: 25px;

    display: flex;
    align-items: center;

    gap: 5px;

    padding-left: 10px;

    background: #f0f7fa;
}


.fi-wp-art-top span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #b9cbd3;
}


.fi-wp-art-body {
    padding: 22px;
}


.fi-wp-art-heading {
    width: 75%;
    height: 11px;

    border-radius: 6px;

    background: #8dd7f4;
}


.fi-wp-art-line {
    width: 55%;
    height: 7px;

    margin-top: 10px;

    border-radius: 5px;

    background: #dceaf0;
}


.fi-wp-art-grid {
    display: flex;
    gap: 9px;

    margin-top: 23px;
}


.fi-wp-art-grid i {
    width: 80px;
    height: 55px;

    display: block;

    border-radius: 8px;

    background: #e7f6fb;
}


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

.fi-wp-card-footer {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    border-top: 1px solid #e6f0f4;
}


.fi-wp-card-footer > div {
    padding: 17px 20px;

    border-right: 1px solid #e6f0f4;
}


.fi-wp-card-footer > div:last-child {
    border-right: 0;
}


.fi-wp-card-footer span {
    display: block;

    color: #0789c8;

    font-size: 8px;
}


.fi-wp-card-footer strong {
    display: block;

    margin-top: 4px;

    color: #496a78;

    font-size: 10px;
}


/* ==========================================
   FLOATING PERFORMANCE CARD
========================================== */

.fi-wp-performance {
    position: absolute;

    z-index: 6;

    right: 0;
    top: 90px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 13px 16px;

    border-radius: 14px;

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

    box-shadow:
        0 18px 40px rgba(30,90,120,.15);
}


.fi-wp-performance-icon {
    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    background: #e8f8fd;
}


.fi-wp-performance small {
    display: block;

    color: #91a3ab;

    font-size: 7px;
}


.fi-wp-performance strong {
    display: block;

    color: #087fc1;

    font-size: 20px;
}


.fi-wp-up {
    color: #0aaa7c;

    font-size: 16px;
}


/* ==========================================
   FLOATING WORDPRESS CARD
========================================== */

.fi-wp-floating {
    position: absolute;

    z-index: 6;

    left: 0;
    bottom: 105px;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px 15px;

    border-radius: 13px;

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

    box-shadow:
        0 18px 40px rgba(30,90,120,.14);
}


.fi-wp-floating-w {
    width: 35px;
    height: 35px;

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

    border-radius: 9px;

    color: #fff;

    background: #087fc1;

    font-size: 17px;
    font-weight: 800;
}


.fi-wp-floating strong {
    display: block;

    color: #294f60;

    font-size: 10px;
}


.fi-wp-floating small {
    display: block;

    margin-top: 3px;

    color: #91a2aa;

    font-size: 8px;
}


/* NUMBER */

.fi-wp-number {
    position: absolute;

    right: 35px;
    bottom: 25px;

    color: rgba(8,127,193,.08);

    font-size: 100px;

    line-height: 1;

    font-weight: 900;
}


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

@media (max-width: 1100px) {

    .fi-wp-container {
        grid-template-columns: 1fr;
    }

    .fi-wp-left {
        padding-right: 0;
        margin-bottom: 60px;
    }

    .fi-wp-left h1 {
        font-size: 58px;
    }

    .fi-wp-right {
        height: 580px;
    }
}


@media (max-width: 700px) {

    .fi-wp-modern {
        padding: 70px 0;
    }

    .fi-wp-left h1 {
        font-size: 44px;
        letter-spacing: -1.5px;
    }

    .fi-wp-left > p {
        font-size: 14px;
    }

    .fi-wp-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .fi-wp-trust {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .fi-wp-right {
        height: 480px;
    }

    .fi-wp-main-card {
        max-width: 100%;
    }

    .fi-wp-preview-content {
        grid-template-columns: 1fr;
        min-height: 260px;
    }

    .fi-wp-art {
        display: none;
    }

    .fi-wp-performance {
        right: -5px;
        top: 50px;
    }

    .fi-wp-floating {
        left: -5px;
        bottom: 45px;
    }

    .fi-wp-number {
        display: none;
    }
}


@media (max-width: 480px) {

    .fi-wp-container {
        width: 94%;
    }

    .fi-wp-left h1 {
        font-size: 37px;
    }

    .fi-wp-preview {
        margin: 10px;
    }

    .fi-wp-preview-content {
        padding: 20px;
    }

    .fi-wp-card-footer > div {
        padding: 12px 10px;
    }

    .fi-wp-performance {
        transform: scale(.85);
        transform-origin: right top;
    }

    .fi-wp-floating {
        transform: scale(.85);
        transform-origin: left bottom;
    }
}


/* =====================================================
   MODERN WORDPRESS WEBSITE DESIGN
===================================================== */

.fi-wp-services {
    position: relative;
    overflow: hidden;
    padding: 90px 0;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(0, 174, 230, .13),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 80%,
            rgba(0, 119, 190, .08),
            transparent 30%
        ),
        #eef8fc;
}


/* DOT PATTERN */

.fi-wp-services::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(22, 112, 150, .15) 1px,
            transparent 1px
        );

    background-size: 25px 25px;

    opacity: .35;
}


/* CONTAINER */

.fi-wp-wrap {
    position: relative;
    z-index: 2;

    width: 92%;
    max-width: 1380px;

    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 55px;
}


/* =====================================================
   LEFT
===================================================== */

.fi-wp-main {
    padding: 10px 0;
}


/* LABEL */

.fi-wp-label {
    width: fit-content;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 16px;

    border-radius: 50px;

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

    border: 1px solid rgba(0,120,180,.15);

    color: #087dbb;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.2px;

    box-shadow: 0 8px 25px rgba(0,80,120,.06);
}


.fi-wp-label span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #00a8df;

    box-shadow:
        0 0 0 5px rgba(0,168,223,.12);
}


/* HEADING */

.fi-wp-main h1 {
    margin: 28px 0 18px;

    max-width: 650px;

    color: #12394c;

    font-size: clamp(42px, 4.5vw, 67px);

    line-height: 1.04;

    letter-spacing: -2.5px;

    font-weight: 800;
}


.fi-wp-main h1 strong {
    display: block;

    font-weight: 800;

    background:
        linear-gradient(
            90deg,
            #087fc1,
            #00b6df
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* INTRO */

.fi-wp-intro {
    max-width: 590px;

    margin-bottom: 28px;

    color: #617d8b;

    font-size: 16px;

    line-height: 1.8;
}


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

.fi-wp-actions {
    display: flex;
    align-items: center;
    gap: 22px;

    margin-bottom: 35px;
}


.fi-wp-primary {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding: 15px 21px;

    border-radius: 11px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #087fc1,
            #00a9dc
        );

    text-decoration: none;

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

    box-shadow:
        0 15px 35px rgba(0,130,200,.25);

    transition: .3s ease;
}


.fi-wp-primary:hover {
    color: #fff;
    transform: translateY(-3px);
}


.fi-wp-primary span {
    font-size: 18px;
}


.fi-wp-secondary {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #315c6d;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
}


.fi-wp-secondary:hover {
    color: #087fc1;
}


/* =====================================================
   INFO CARD
===================================================== */

.fi-wp-info-card {
    padding: 22px;

    margin-bottom: 28px;

    border-radius: 17px;

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

    border: 1px solid rgba(255,255,255,.95);

    box-shadow:
        0 15px 40px rgba(25,80,110,.08);
}


.fi-wp-info-heading {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 15px;
}


.fi-wp-icon {
    width: 40px;
    height: 40px;

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

    border-radius: 11px;

    color: #0788c7;

    background: #e8f7fc;

    font-weight: 800;
}


.fi-wp-info-heading small {
    color: #0786c4;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.3px;
}


.fi-wp-info-heading h3 {
    margin: 4px 0 0;

    color: #23495b;

    font-size: 17px;
}


.fi-wp-info-card ul {
    padding: 0;
    margin: 0;

    list-style: none;
}


.fi-wp-info-card li {
    position: relative;

    padding-left: 20px;

    margin: 9px 0;

    color: #6c8591;

    font-size: 12px;

    line-height: 1.6;
}


.fi-wp-info-card li::before {
    content: "→";

    position: absolute;
    left: 0;

    color: #0791ce;

    font-weight: 700;
}


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

.fi-wp-section-title {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 18px;
}


.fi-wp-section-title > span {
    color: #0791ce;

    font-size: 10px;
    font-weight: 800;
}


.fi-wp-section-title h3 {
    margin: 0;

    color: #244b5d;

    font-size: 19px;

    font-weight: 800;
}


/* =====================================================
   EXPERTISE
===================================================== */

.fi-wp-expertise {
    padding: 22px;

    margin-bottom: 28px;

    border-radius: 17px;

    background: #fff;

    box-shadow:
        0 15px 40px rgba(30,90,120,.07);
}


.fi-wp-expertise-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;
}


.fi-wp-expertise-grid > div {
    min-height: 80px;

    padding: 15px;

    border-radius: 12px;

    background: #f4faff;

    border: 1px solid #e5f1f6;

    transition: .3s ease;
}


.fi-wp-expertise-grid > div:hover {
    transform: translateY(-3px);

    border-color: #a9dff2;
}


.fi-wp-expertise-grid span {
    display: block;

    color: #078dca;

    font-size: 8px;
}


.fi-wp-expertise-grid strong {
    display: block;

    margin-top: 8px;

    color: #416475;

    font-size: 11px;

    line-height: 1.4;
}


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

.fi-wp-about {
    padding: 25px;

    margin-bottom: 28px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #e5f7fd,
            #f8fdff
        );

    border: 1px solid #d9edf4;
}


.fi-wp-about p {
    margin: 9px 0;

    color: #67818e;

    font-size: 12px;

    line-height: 1.7;
}


.fi-wp-about strong {
    color: #247294;
}


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

.fi-wp-testimonial {
    display: flex;
    gap: 15px;

    padding: 22px;

    border-radius: 17px;

    background: #123e53;

    box-shadow:
        0 20px 45px rgba(20,70,95,.16);
}


.fi-wp-quote {
    color: #50c9ed;

    font-size: 45px;

    line-height: .7;
}


.fi-wp-testimonial small {
    color: #63cceb;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;
}


.fi-wp-testimonial p {
    margin: 7px 0 0;

    color: #d8edf4;

    font-size: 12px;

    line-height: 1.6;
}


/* =====================================================
   RIGHT SIDE
===================================================== */

.fi-wp-side {
    position: relative;
}


/* =====================================================
   WEBSITE VISUAL
===================================================== */

.werdpresswebsite {
    position: relative;

    min-height: 455px;

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

    margin-bottom: 25px;
}


.werdpresswebsite::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,172,228,.16),
            transparent 68%
        );
}


/* BROWSER */

.fi-wp-browser {
    position: relative;
    z-index: 3;

    width: 100%;
    max-width: 610px;

    overflow: hidden;

    border-radius: 21px;

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

    border: 1px solid rgba(255,255,255,.95);

    box-shadow:
        0 35px 75px rgba(20,80,110,.18);

    transform: rotate(-1deg);
}


/* BROWSER TOP */

.fi-wp-browser-top {
    height: 45px;

    display: flex;
    align-items: center;

    padding: 0 15px;

    background: #f7fbfd;

    border-bottom: 1px solid #e4eef2;
}


.fi-wp-browser-dots {
    display: flex;
    gap: 5px;

    width: 80px;
}


.fi-wp-browser-dots i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #b9cbd3;
}


.fi-wp-browser-url {
    flex: 1;

    padding: 7px 15px;

    text-align: center;

    border-radius: 6px;

    color: #8aa0aa;

    background: #edf4f7;

    font-size: 9px;
}


.fi-wp-browser-top > span {
    width: 70px;

    text-align: right;

    color: #9cafb7;
}


/* PREVIEW */

.fi-wp-preview {
    padding: 18px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #eefaff
        );
}


/* NAV */

.fi-wp-preview-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 8px 5px 17px;
}


.fi-wp-preview-nav strong {
    color: #123f54;

    font-size: 10px;
    letter-spacing: 1px;
}


.fi-wp-preview-nav div {
    display: flex;
    gap: 20px;

    color: #8097a2;

    font-size: 7px;
}


.fi-wp-preview-nav b {
    padding: 7px 10px;

    border-radius: 6px;

    color: white;

    background: #087fc1;

    font-size: 7px;
}


/* PREVIEW HERO */

.fi-wp-preview-hero {
    min-height: 260px;

    display: grid;
    grid-template-columns: 48% 52%;

    align-items: center;

    padding: 28px;

    overflow: hidden;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #e7f8fe,
            #ffffff
        );
}


.fi-wp-preview-hero small {
    color: #0788c6;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1px;
}


.fi-wp-preview-hero h2 {
    margin: 10px 0;

    color: #193e50;

    font-size: 28px;

    line-height: 1.05;

    font-weight: 800;
}


.fi-wp-preview-hero h2 span {
    display: block;

    color: #078bc8;
}


.fi-wp-preview-hero p {
    max-width: 190px;

    color: #77909b;

    font-size: 8px;

    line-height: 1.6;
}


.fi-wp-preview-hero button {
    margin-top: 10px;

    padding: 8px 11px;

    border: 0;

    border-radius: 6px;

    color: white;

    background: #087fc1;

    font-size: 7px;
}


.fi-wp-preview-hero button span {
    margin-left: 7px;

    font-size: 11px;
}


/* ART */

.fi-wp-design-art {
    position: relative;

    height: 220px;
}


.fi-wp-art-circle {
    position: absolute;

    width: 190px;
    height: 190px;

    right: 5px;
    top: 10px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #d5f4ff,
            #a6e3f8
        );
}


.fi-wp-art-card {
    position: absolute;

    z-index: 2;

    width: 230px;
    height: 150px;

    right: 25px;
    top: 48px;

    overflow: hidden;

    border-radius: 12px;

    background: white;

    transform: rotate(-7deg);

    box-shadow:
        0 20px 40px rgba(20,90,120,.18);
}


.fi-wp-art-header {
    height: 24px;

    display: flex;
    align-items: center;

    gap: 4px;

    padding-left: 10px;

    background: #f0f7fa;
}


.fi-wp-art-header i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #b6cad3;
}


.fi-wp-art-body {
    padding: 20px;
}


.fi-wp-art-title {
    width: 75%;
    height: 11px;

    border-radius: 5px;

    background: #8ed8f5;
}


.fi-wp-art-line {
    width: 55%;
    height: 6px;

    margin-top: 9px;

    border-radius: 5px;

    background: #dbeaf0;
}


.fi-wp-art-boxes {
    display: flex;
    gap: 8px;

    margin-top: 20px;
}


.fi-wp-art-boxes span {
    width: 55px;
    height: 48px;

    border-radius: 7px;

    background: #e7f6fb;
}


/* PREVIEW BOTTOM */

.fi-wp-preview-bottom {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    margin-top: 12px;

    border-radius: 10px;

    overflow: hidden;

    background: #fff;

    border: 1px solid #e3eef3;
}


.fi-wp-preview-bottom div {
    padding: 12px;

    text-align: center;

    border-right: 1px solid #e4eef2;
}


.fi-wp-preview-bottom div:last-child {
    border-right: 0;
}


.fi-wp-preview-bottom strong {
    display: block;

    color: #0788c7;

    font-size: 15px;
}


.fi-wp-preview-bottom span {
    display: block;

    margin-top: 3px;

    color: #8aa0aa;

    font-size: 7px;
}


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

.fi-wp-float {
    position: absolute;

    z-index: 8;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 11px 14px;

    border-radius: 12px;

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

    box-shadow:
        0 18px 40px rgba(20,80,110,.15);
}


.fi-wp-float span {
    width: 32px;
    height: 32px;

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

    border-radius: 8px;

    color: #087fc1;

    background: #e8f7fc;

    font-weight: 800;
}


.fi-wp-float strong {
    display: block;

    color: #294e5e;

    font-size: 9px;
}


.fi-wp-float small {
    display: block;

    margin-top: 3px;

    color: #91a2aa;

    font-size: 7px;
}


.fi-wp-float-one {
    left: -18px;
    top: 80px;
}


.fi-wp-float-two {
    right: -15px;
    bottom: 65px;
}


/* =====================================================
   RIGHT INFO CARD
===================================================== */

.fi-wp-side-card {
    padding: 22px;

    margin-bottom: 25px;

    border-radius: 17px;

    background: #fff;

    border: 1px solid #e4eef3;

    box-shadow:
        0 15px 40px rgba(30,90,120,.07);
}


.fi-wp-side-title {
    display: flex;
    gap: 13px;

    margin-bottom: 18px;
}


.fi-wp-side-title > span {
    color: #078dca;

    font-size: 10px;
    font-weight: 800;
}


.fi-wp-side-title small {
    color: #0788c7;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1px;
}


.fi-wp-side-title h3 {
    margin: 4px 0 0;

    color: #244b5d;

    font-size: 17px;
}


.fi-wp-side-card ul {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 10px;

    padding: 0;
    margin: 0;

    list-style: none;
}


.fi-wp-side-card li {
    padding: 12px;

    border-radius: 10px;

    color: #587583;

    background: #f4faff;

    font-size: 9px;

    line-height: 1.5;
}


.fi-wp-side-card li span {
    display: block;

    margin-bottom: 6px;

    color: #0791ce;

    font-weight: 800;
}


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

.fi-wp-services-card {
    padding: 24px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4fbfe
        );

    border: 1px solid #dfedf2;

    box-shadow:
        0 18px 45px rgba(30,90,120,.08);
}


.fi-wp-service-item {
    display: flex;
    gap: 13px;

    padding: 15px 0;

    border-bottom: 1px solid #e6f0f4;
}


.fi-wp-service-item > span {
    min-width: 28px;

    color: #078dcc;

    font-size: 9px;
    font-weight: 800;
}


.fi-wp-service-item strong {
    color: #2c5262;

    font-size: 11px;
}


.fi-wp-service-item p {
    margin: 5px 0 0;

    color: #7b919b;

    font-size: 9px;

    line-height: 1.6;
}


/* SERVICE BUTTONS */

.fi-wp-service-buttons {
    display: flex;
    gap: 10px;

    margin-top: 20px;
}


.fi-wp-service-buttons a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 11px 14px;

    border-radius: 9px;

    color: #fff;

    background: #087fc1;

    text-decoration: none;

    font-size: 9px;
    font-weight: 700;
}


.fi-wp-service-buttons a:last-child {
    color: #17617d;

    background: #e8f6fb;
}


.fi-wp-service-buttons a span {
    font-size: 13px;
}


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

@media (max-width: 1100px) {

    .fi-wp-wrap {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .fi-wp-main h1 {
        font-size: 56px;
    }

    .fi-wp-left {
        padding-right: 0;
    }
}


@media (max-width: 700px) {

    .fi-wp-services {
        padding: 65px 0;
    }

    .fi-wp-wrap {
        width: 94%;
    }

    .fi-wp-main h1 {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .fi-wp-intro {
        font-size: 14px;
    }

    .fi-wp-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .fi-wp-expertise-grid {
        grid-template-columns: 1fr;
    }

    .fi-wp-side-card ul {
        grid-template-columns: 1fr;
    }

    .fi-wp-preview-hero {
        grid-template-columns: 1fr;
    }

    .fi-wp-design-art {
        display: none;
    }

    .fi-wp-browser {
        transform: none;
    }

    .fi-wp-float-one {
        left: -5px;
        top: 55px;
    }

    .fi-wp-float-two {
        right: -5px;
        bottom: 35px;
    }
}


@media (max-width: 480px) {

    .fi-wp-main h1 {
        font-size: 35px;
    }

    .fi-wp-primary {
        width: 100%;
        justify-content: center;
    }

    .fi-wp-preview {
        padding: 10px;
    }

    .fi-wp-preview-nav div {
        display: none;
    }

    .fi-wp-preview-hero {
        padding: 20px;
    }

    .fi-wp-preview-hero h2 {
        font-size: 25px;
    }

    .fi-wp-preview-bottom strong {
        font-size: 13px;
    }

    .fi-wp-service-buttons {
        flex-direction: column;
    }

    .fi-wp-service-buttons a {
        justify-content: center;
    }

    .fi-wp-float {
        transform: scale(.82);
    }
}



/* 
===========================hosting csss ==================================== */


/* =====================================================
   MODERN DOMAIN HOSTING SECTION
===================================================== */

.fi-hosting-section {
    position: relative;
    overflow: hidden;

    padding: 90px 0;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(0, 163, 224, .14),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(20, 90, 180, .08),
            transparent 30%
        ),
        #eef8fc;
}


/* DOT PATTERN */

.fi-hosting-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(25, 112, 150, .16) 1px,
            transparent 1px
        );

    background-size: 26px 26px;

    opacity: .35;
}


/* =====================================================
   CONTAINER
===================================================== */

.fi-hosting-container {
    position: relative;
    z-index: 2;

    width: 92%;
    max-width: 1380px;

    min-height: 600px;

    margin: auto;

    display: grid;

    grid-template-columns: 46% 54%;

    align-items: center;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.fi-hosting-content {
    padding-right: 45px;
}


/* LABEL */

.fi-hosting-label {
    width: fit-content;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 16px;

    border-radius: 50px;

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

    border: 1px solid rgba(0,120,180,.14);

    color: #087db9;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.3px;

    box-shadow:
        0 8px 25px rgba(0,80,120,.06);
}


.fi-hosting-label-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #00a8df;

    box-shadow:
        0 0 0 5px rgba(0,168,223,.12);
}


/* HEADING */

.fi-hosting-content h1 {
    margin: 27px 0 18px;

    max-width: 600px;

    color: #123b4e;

    font-size: clamp(48px, 5vw, 70px);

    line-height: 1.03;

    letter-spacing: -3px;

    font-weight: 800;
}


.fi-hosting-content h1 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #087fc1,
            #00b8df
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* DESCRIPTION */

.fi-hosting-description {
    max-width: 570px;

    margin-bottom: 27px;

    color: #647f8c;

    font-size: 16px;

    line-height: 1.8;
}


/* =====================================================
   SERVICE GRID
===================================================== */

.fi-hosting-services {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    max-width: 620px;

    margin-bottom: 28px;
}


.fi-hosting-service {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 13px;

    border-radius: 12px;

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

    border: 1px solid rgba(255,255,255,.9);

    transition: .3s ease;
}


.fi-hosting-service:hover {
    transform: translateY(-3px);

    background: #fff;

    box-shadow:
        0 12px 30px rgba(30,90,120,.09);
}


/* ICON */

.fi-hosting-service-icon {
    min-width: 36px;
    height: 36px;

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

    border-radius: 9px;

    color: #0789c8;

    background: #e7f7fc;

    font-size: 15px;
    font-weight: 800;
}


.fi-hosting-service strong {
    display: block;

    color: #294e5e;

    font-size: 11px;
}


.fi-hosting-service small {
    display: block;

    margin-top: 3px;

    color: #8a9ea7;

    font-size: 8px;
}


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

.fi-hosting-buttons {
    display: flex;
    align-items: center;

    gap: 20px;

    margin-bottom: 23px;
}


.fi-hosting-primary {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    padding: 14px 21px;

    border-radius: 11px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #087fc1,
            #00a9dc
        );

    text-decoration: none;

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

    box-shadow:
        0 14px 32px rgba(0,130,200,.25);

    transition: .3s ease;
}


.fi-hosting-primary:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 20px 40px rgba(0,130,200,.32);
}


.fi-hosting-primary span {
    font-size: 18px;
}


.fi-hosting-secondary {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #315d6e;

    text-decoration: none;

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

    transition: .3s ease;
}


.fi-hosting-secondary:hover {
    color: #087fc1;
}


.fi-hosting-secondary span {
    font-size: 17px;
}


/* TRUST */

.fi-hosting-trust {
    display: flex;
    gap: 20px;

    color: #78919d;

    font-size: 9px;
    font-weight: 600;
}


.fi-hosting-trust span {
    display: flex;
    align-items: center;
    gap: 5px;
}


/* =====================================================
   RIGHT VISUAL
===================================================== */

.fi-hosting-visual {
    position: relative;

    height: 600px;

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


/* GLOW */

.fi-hosting-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,171,230,.17),
            transparent 68%
        );
}


/* =====================================================
   MAIN HOSTING CARD
===================================================== */

.fi-hosting-card {
    position: relative;
    z-index: 3;

    width: 600px;
    max-width: 88%;

    overflow: hidden;

    border-radius: 24px;

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

    border: 1px solid rgba(255,255,255,.95);

    box-shadow:
        0 35px 80px rgba(20,80,110,.18),
        0 8px 25px rgba(20,100,140,.06);

    backdrop-filter: blur(18px);
}


/* CARD TOP */

.fi-hosting-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 22px;

    border-bottom: 1px solid #e5eef2;
}


.fi-hosting-brand {
    display: flex;
    align-items: center;

    gap: 11px;
}


.fi-hosting-brand-icon {
    width: 39px;
    height: 39px;

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

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #087fc1,
            #00a9dc
        );

    font-size: 17px;
    font-weight: 800;
}


.fi-hosting-brand strong {
    display: block;

    color: #193f51;

    font-size: 13px;
}


.fi-hosting-brand small {
    display: block;

    margin-top: 3px;

    color: #8ea1aa;

    font-size: 8px;
}


/* ONLINE */

.fi-hosting-online {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 7px 10px;

    border-radius: 50px;

    color: #07996f;

    background: #eafaf5;

    font-size: 7px;
    font-weight: 800;
}


.fi-hosting-online span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #12b783;
}


/* =====================================================
   DOMAIN
===================================================== */

.fi-domain-box {
    margin: 20px;

    padding: 20px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #eaf9fe,
            #f9fdff
        );

    border: 1px solid #deedf3;
}


.fi-domain-box > small {
    color: #0787c5;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.2px;
}


.fi-domain-search {
    display: flex;
    align-items: center;

    margin-top: 11px;

    padding: 5px;

    border-radius: 9px;

    background: #fff;

    border: 1px solid #dcecf2;
}


.fi-domain-search span {
    padding-left: 9px;

    color: #8ca2ad;

    font-size: 10px;
}


.fi-domain-search strong {
    color: #315768;

    font-size: 11px;
}


.fi-domain-search em {
    color: #078aca;

    font-size: 11px;
    font-style: normal;
    font-weight: 700;
}


.fi-domain-search button {
    margin-left: auto;

    padding: 8px 13px;

    border: 0;

    border-radius: 7px;

    color: #fff;

    background: #087fc1;

    font-size: 8px;
    font-weight: 700;
}


.fi-domain-available {
    margin-top: 9px;

    color: #0a9e76;

    font-size: 8px;
    font-weight: 700;
}


/* =====================================================
   HOSTING STATS
===================================================== */

.fi-hosting-stats {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    margin: 0 20px 15px;

    border-radius: 12px;

    overflow: hidden;

    border: 1px solid #e2edf1;
}


.fi-hosting-stats div {
    padding: 13px;

    text-align: center;

    background: #fff;

    border-right: 1px solid #e4eef2;
}


.fi-hosting-stats div:last-child {
    border-right: 0;
}


.fi-hosting-stats strong {
    display: block;

    color: #087fc1;

    font-size: 17px;
}


.fi-hosting-stats span {
    display: block;

    margin-top: 3px;

    color: #8ba0a9;

    font-size: 7px;
}


/* =====================================================
   EMAIL PREVIEW
===================================================== */

.fi-email-preview {
    margin: 0 20px 18px;

    padding: 15px;

    border-radius: 13px;

    background: #f7fbfd;

    border: 1px solid #e3eef2;
}


.fi-email-header {
    display: flex;
    align-items: center;

    gap: 10px;
}


.fi-email-icon {
    width: 33px;
    height: 33px;

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

    border-radius: 8px;

    color: #087fc1;

    background: #e6f6fc;

    font-weight: 800;
}


.fi-email-header strong {
    display: block;

    color: #315667;

    font-size: 10px;
}


.fi-email-header small {
    display: block;

    margin-top: 3px;

    color: #8ba0a9;

    font-size: 7px;
}


.fi-email-header > span {
    margin-left: auto;

    color: #0aa77a;

    font-size: 15px;
}


.fi-email-address {
    margin-top: 12px;

    padding: 9px 11px;

    border-radius: 7px;

    background: #fff;

    color: #477183;

    font-size: 9px;
}


.fi-email-lines {
    margin-top: 10px;
}


.fi-email-lines i {
    display: block;

    width: 70%;
    height: 5px;

    margin-top: 5px;

    border-radius: 5px;

    background: #dcebf0;
}


.fi-email-lines i:nth-child(2) {
    width: 52%;
}


.fi-email-lines i:nth-child(3) {
    width: 62%;
}


/* =====================================================
   CARD BOTTOM
===================================================== */

.fi-hosting-card-bottom {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    border-top: 1px solid #e4eef2;
}


.fi-hosting-card-bottom span,
.fi-hosting-card-bottom strong {
    padding: 13px 8px;

    text-align: center;

    font-size: 7px;
}


.fi-hosting-card-bottom span {
    color: #8ba0aa;

    border-right: 1px solid #e4eef2;
}


.fi-hosting-card-bottom strong {
    color: #079a72;

    background: #effbf7;
}


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

.fi-hosting-float {
    position: absolute;

    z-index: 7;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px 15px;

    border-radius: 13px;

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

    box-shadow:
        0 18px 40px rgba(25,80,110,.15);

    backdrop-filter: blur(12px);
}


.fi-hosting-float-icon {
    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    color: #0788c7;

    background: #e7f7fc;

    font-weight: 800;
}


.fi-hosting-float small {
    display: block;

    color: #92a4ad;

    font-size: 7px;
    font-weight: 700;
}


.fi-hosting-float strong {
    display: block;

    margin-top: 3px;

    color: #2c5263;

    font-size: 10px;
}


.fi-hosting-float-one {
    left: -5px;
    top: 95px;
}


.fi-hosting-float-two {
    right: -5px;
    bottom: 100px;
}


/* CIRCLE */

.fi-hosting-circle {
    position: absolute;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(0,130,190,.12);

    border-radius: 50%;
}


.fi-hosting-number {
    position: absolute;

    right: 25px;
    bottom: 15px;

    color: rgba(0,120,190,.07);

    font-size: 100px;

    font-weight: 900;
}


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

@media (max-width: 1100px) {

    .fi-hosting-container {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .fi-hosting-content {
        padding-right: 0;
    }

    .fi-hosting-visual {
        height: 580px;
    }

}


@media (max-width: 700px) {

    .fi-hosting-section {
        padding: 65px 0;
    }

    .fi-hosting-container {
        width: 94%;
    }

    .fi-hosting-content h1 {
        font-size: 44px;

        letter-spacing: -1.5px;
    }

    .fi-hosting-description {
        font-size: 14px;
    }

    .fi-hosting-services {
        grid-template-columns: 1fr;
    }

    .fi-hosting-buttons {
        flex-direction: column;

        align-items: flex-start;
    }

    .fi-hosting-trust {
        flex-wrap: wrap;
    }

    .fi-hosting-visual {
        height: 500px;
    }

    .fi-hosting-card {
        max-width: 100%;
    }

    .fi-hosting-float-one {
        left: -5px;
        top: 40px;
    }

    .fi-hosting-float-two {
        right: -5px;
        bottom: 40px;
    }

    .fi-hosting-circle {
        display: none;
    }

}


@media (max-width: 480px) {

    .fi-hosting-content h1 {
        font-size: 36px;
    }

    .fi-hosting-services {
        gap: 8px;
    }

    .fi-hosting-service {
        padding: 11px;
    }

    .fi-hosting-card {
        border-radius: 17px;
    }

    .fi-hosting-card-top {
        padding: 15px;
    }

    .fi-domain-box {
        margin: 12px;
        padding: 14px;
    }

    .fi-hosting-stats {
        margin-left: 12px;
        margin-right: 12px;
    }

    .fi-email-preview {
        margin-left: 12px;
        margin-right: 12px;
    }

    .fi-hosting-float {
        transform: scale(.82);
    }

    .fi-hosting-number {
        display: none;
    }

}




/* =====================================================
   MODERN DOMAIN + HOSTING + EMAIL SECTION
===================================================== */

.fi-domain-section {
    position: relative;
    overflow: hidden;

    padding: 95px 0;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(0,170,230,.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 85%,
            rgba(0,110,190,.08),
            transparent 28%
        ),
        #eef8fc;
}


/* BACKGROUND DOTS */

.fi-domain-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(20,110,150,.16) 1px,
            transparent 1px
        );

    background-size: 26px 26px;

    opacity: .35;
}


/* CONTAINER */

.fi-domain-container {
    position: relative;
    z-index: 2;

    width: 92%;
    max-width: 1380px;

    margin: auto;

    display: grid;
    grid-template-columns: 1fr 460px;

    gap: 60px;

    align-items: start;
}


/* =====================================================
   LEFT
===================================================== */

.fi-domain-content {
    min-width: 0;
}


/* LABEL */

.fi-domain-label {
    width: fit-content;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 9px 16px;

    border-radius: 50px;

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

    border: 1px solid rgba(0,120,180,.14);

    color: #087dbb;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.3px;
}


.fi-domain-label span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #00a8df;

    box-shadow:
        0 0 0 5px rgba(0,168,223,.12);
}


/* HEADING */

.fi-domain-content > h2 {
    max-width: 760px;

    margin: 25px 0 15px;

    color: #123c4f;

    font-size: clamp(42px, 4.5vw, 64px);

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-weight: 800;
}


.fi-domain-content > h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #087fc1,
            #00b8df
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* HIGHLIGHT */

.fi-domain-highlight {
    margin: 0 0 12px;

    color: #087fc1;

    font-size: 15px;
}


/* INTRO */

.fi-domain-intro {
    max-width: 760px;

    margin-bottom: 40px;

    color: #667f8b;

    font-size: 15px;

    line-height: 1.85;
}


/* =====================================================
   SECTION HEADINGS
===================================================== */

.fi-domain-heading {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 38px 0 18px;
}


.fi-domain-heading > span {
    color: #078cca;

    font-size: 10px;
    font-weight: 800;
}


.fi-domain-heading h3 {
    margin: 0;

    color: #234b5d;

    font-size: 20px;

    font-weight: 800;
}


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

.fi-domain-offers {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;
}


.fi-domain-offer {
    padding: 20px;

    border-radius: 17px;

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

    border: 1px solid rgba(255,255,255,.95);

    box-shadow:
        0 12px 35px rgba(30,90,120,.06);

    transition: .3s ease;
}


.fi-domain-offer:hover {
    transform: translateY(-4px);

    background: #fff;

    box-shadow:
        0 20px 40px rgba(30,90,120,.10);
}


.fi-domain-offer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.fi-domain-offer-top > span {
    color: #c2d5dc;

    font-size: 10px;
    font-weight: 800;
}


.fi-domain-icon {
    width: 40px;
    height: 40px;

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

    border-radius: 11px;

    color: #0788c7;

    background: #e6f7fc;

    font-size: 17px;
    font-weight: 800;
}


.fi-domain-offer h4 {
    margin: 14px 0 7px;

    color: #294e5e;

    font-size: 14px;
}


.fi-domain-offer p {
    margin: 0 0 12px;

    color: #7a919b;

    font-size: 10px;

    line-height: 1.65;
}


.fi-domain-offer ul {
    padding: 0;
    margin: 0;

    list-style: none;
}


.fi-domain-offer li {
    position: relative;

    padding-left: 15px;

    margin-top: 6px;

    color: #667f8a;

    font-size: 9px;

    line-height: 1.5;
}


.fi-domain-offer li::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: #079b75;

    font-weight: 800;
}


/* =====================================================
   BENEFITS
===================================================== */

.fi-domain-benefits {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 10px;
}


.fi-domain-benefits > div {
    padding: 16px;

    border-radius: 13px;

    background: #fff;

    border: 1px solid #e3eef2;
}


.fi-domain-benefits b {
    display: block;

    color: #078dcc;

    font-size: 8px;
}


.fi-domain-benefits strong {
    display: block;

    margin-top: 7px;

    color: #355b6b;

    font-size: 11px;
}


.fi-domain-benefits p {
    margin: 6px 0 0;

    color: #81959e;

    font-size: 9px;

    line-height: 1.55;
}


/* =====================================================
   NEEDS
===================================================== */

.fi-domain-needs {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 9px;
}


.fi-domain-needs > div {
    padding: 16px;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3fbfe
        );

    border: 1px solid #e0edf2;
}


.fi-domain-needs span {
    color: #078dcc;

    font-size: 8px;
}


.fi-domain-needs strong {
    display: block;

    margin-top: 8px;

    color: #355a6a;

    font-size: 11px;
}


.fi-domain-needs small {
    display: block;

    margin-top: 6px;

    color: #81969f;

    font-size: 8px;

    line-height: 1.55;
}


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

.fi-domain-process {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 12px;
}


.fi-domain-process > div {
    position: relative;

    padding: 20px;

    border-radius: 15px;

    background: #123f54;

    overflow: hidden;
}


.fi-domain-process > div::after {
    content: "→";

    position: absolute;

    right: 14px;
    top: 14px;

    color: rgba(255,255,255,.15);

    font-size: 25px;
}


.fi-domain-process span {
    color: #55c9eb;

    font-size: 9px;
    font-weight: 800;
}


.fi-domain-process strong {
    display: block;

    margin-top: 10px;

    color: #fff;

    font-size: 13px;
}


.fi-domain-process p {
    margin: 7px 0 0;

    color: #b5d5df;

    font-size: 9px;

    line-height: 1.6;
}


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

.fi-domain-features {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.fi-domain-features span {
    padding: 9px 12px;

    border-radius: 8px;

    color: #527382;

    background: #fff;

    border: 1px solid #e2edf1;

    font-size: 9px;
}


/* =====================================================
   RIGHT SIDE
===================================================== */

.fi-domain-side {
    position: sticky;

    top: 30px;
}


/* VISUAL */

.HostingWebasiteabout {
    position: relative;

    min-height: 535px;

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


/* GLOW */

.HostingWebasiteabout::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,170,230,.16),
            transparent 68%
        );
}


/* =====================================================
   DASHBOARD
===================================================== */

.fi-domain-dashboard {
    position: relative;
    z-index: 3;

    width: 100%;

    overflow: hidden;

    border-radius: 22px;

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

    border: 1px solid rgba(255,255,255,.95);

    box-shadow:
        0 35px 75px rgba(20,80,110,.18);

    backdrop-filter: blur(15px);
}


/* TOP */

.fi-dashboard-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px;

    border-bottom: 1px solid #e4eef2;
}


.fi-dashboard-brand {
    display: flex;
    align-items: center;

    gap: 10px;
}


.fi-dashboard-brand > div {
    width: 37px;
    height: 37px;

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

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #087fc1,
            #00a9dc
        );

    font-size: 16px;
    font-weight: 800;
}


.fi-dashboard-brand strong {
    display: block;

    color: #284e5e;

    font-size: 12px;
}


.fi-dashboard-brand small {
    display: block;

    margin-top: 3px;

    color: #91a3aa;

    font-size: 7px;
}


.fi-dashboard-live {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 6px 9px;

    border-radius: 50px;

    color: #079a70;

    background: #eafaf5;

    font-size: 7px;
    font-weight: 800;
}


.fi-dashboard-live i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #12b783;
}


/* =====================================================
   DOMAIN BOX
===================================================== */

.fi-dashboard-domain {
    margin: 17px;

    padding: 17px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #eaf9fe,
            #f9fdff
        );

    border: 1px solid #deedf3;
}


.fi-dashboard-domain > small {
    color: #0787c5;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1px;
}


.fi-domain-address {
    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 10px;

    padding: 11px;

    border-radius: 8px;

    background: #fff;
}


.fi-domain-address span {
    font-size: 12px;
}


.fi-domain-address strong {
    color: #315768;

    font-size: 11px;
}


.fi-domain-address b {
    margin-left: auto;

    color: #0aa078;
}


.fi-domain-status {
    margin-top: 8px;

    color: #0a9b73;

    font-size: 8px;
}


/* =====================================================
   STATS
===================================================== */

.fi-dashboard-stats {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    margin: 0 17px 15px;

    border-radius: 11px;

    overflow: hidden;

    border: 1px solid #e3edf1;
}


.fi-dashboard-stats div {
    padding: 13px;

    text-align: center;

    border-right: 1px solid #e4eef2;
}


.fi-dashboard-stats div:last-child {
    border-right: 0;
}


.fi-dashboard-stats strong {
    display: block;

    color: #0788c7;

    font-size: 16px;
}


.fi-dashboard-stats span {
    display: block;

    margin-top: 3px;

    color: #8da1a9;

    font-size: 7px;
}


/* =====================================================
   EMAIL
===================================================== */

.fi-dashboard-email {
    margin: 0 17px 17px;

    padding: 15px;

    border-radius: 14px;

    background: #f7fbfd;

    border: 1px solid #e2edf1;
}


.fi-email-title {
    display: flex;
    align-items: center;

    gap: 9px;
}


.fi-email-symbol {
    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    color: #0787c7;

    background: #e5f6fc;

    font-weight: 800;
}


.fi-email-title strong {
    display: block;

    color: #315667;

    font-size: 10px;
}


.fi-email-title small {
    display: block;

    margin-top: 3px;

    color: #91a2aa;

    font-size: 7px;
}


.fi-email-title > b {
    margin-left: auto;

    color: #0a9e75;
}


.fi-email-account {
    margin-top: 12px;

    padding: 10px;

    border-radius: 7px;

    background: #fff;

    color: #477183;

    font-size: 9px;
}


.fi-email-row {
    display: flex;
    justify-content: space-between;

    margin-top: 10px;

    color: #8399a3;

    font-size: 8px;
}


.fi-email-row b {
    color: #087fc1;
}


.fi-storage {
    height: 5px;

    margin-top: 6px;

    overflow: hidden;

    border-radius: 10px;

    background: #dfeef3;
}


.fi-storage span {
    display: block;

    width: 68%;
    height: 100%;

    border-radius: 10px;

    background: #0ba3d7;
}


/* =====================================================
   DASHBOARD SERVICES
===================================================== */

.fi-dashboard-services {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    border-top: 1px solid #e4eef2;
}


.fi-dashboard-services div {
    padding: 13px 5px;

    text-align: center;

    border-right: 1px solid #e4eef2;
}


.fi-dashboard-services div:last-child {
    border-right: 0;
}


.fi-dashboard-services span {
    display: block;

    color: #0aa078;

    font-size: 10px;
}


.fi-dashboard-services small {
    display: block;

    margin-top: 4px;

    color: #8299a3;

    font-size: 7px;
}


/* =====================================================
   FLOATING
===================================================== */

.fi-domain-floating {
    position: absolute;

    z-index: 8;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 11px 14px;

    border-radius: 12px;

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

    box-shadow:
        0 18px 40px rgba(25,80,110,.15);
}


.fi-domain-floating > div {
    width: 33px;
    height: 33px;

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

    border-radius: 9px;

    color: #087fc1;

    background: #e7f7fc;

    font-weight: 800;
}


.fi-domain-floating small {
    display: block;

    color: #91a3aa;

    font-size: 7px;
}


.fi-domain-floating strong {
    display: block;

    margin-top: 3px;

    color: #2c5263;

    font-size: 9px;
}


.fi-domain-floating-one {
    left: -18px;
    top: 70px;
}


.fi-domain-floating-two {
    right: -15px;
    bottom: 70px;
}


/* =====================================================
   SIDE INFO
===================================================== */

.fi-domain-side-info {
    padding: 23px;

    border-radius: 17px;

    background: #fff;

    border: 1px solid #e2edf1;

    box-shadow:
        0 15px 40px rgba(30,90,120,.07);
}


.fi-domain-side-title span {
    color: #078bc8;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;
}


.fi-domain-side-title h3 {
    margin: 5px 0 18px;

    color: #244b5c;

    font-size: 19px;
}


.fi-domain-side-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 9px;
}


.fi-domain-side-grid > div {
    padding: 13px;

    border-radius: 10px;

    background: #f4faff;
}


.fi-domain-side-grid b {
    color: #078dcc;

    font-size: 8px;
}


.fi-domain-side-grid strong {
    display: block;

    margin-top: 5px;

    color: #3b6070;

    font-size: 10px;
}


.fi-domain-side-grid small {
    display: block;

    margin-top: 3px;

    color: #879ba4;

    font-size: 7px;

    line-height: 1.5;
}


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

@media (max-width: 1100px) {

    .fi-domain-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .fi-domain-side {
        position: relative;
        top: auto;
    }

    .fi-domain-content > h2 {
        font-size: 55px;
    }

}


@media (max-width: 700px) {

    .fi-domain-section {
        padding: 65px 0;
    }

    .fi-domain-container {
        width: 94%;
    }

    .fi-domain-content > h2 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }

    .fi-domain-intro {
        font-size: 14px;
    }

    .fi-domain-offers {
        grid-template-columns: 1fr;
    }

    .fi-domain-benefits {
        grid-template-columns: 1fr 1fr;
    }

    .fi-domain-needs {
        grid-template-columns: 1fr 1fr;
    }

    .fi-domain-process {
        grid-template-columns: 1fr;
    }

    .fi-domain-visual,
    .HostingWebasiteabout {
        min-height: 500px;
    }

    .fi-domain-floating-one {
        left: -5px;
    }

    .fi-domain-floating-two {
        right: -5px;
    }

}


@media (max-width: 480px) {

    .fi-domain-content > h2 {
        font-size: 36px;
    }

    .fi-domain-benefits {
        grid-template-columns: 1fr;
    }

    .fi-domain-needs {
        grid-template-columns: 1fr;
    }

    .fi-domain-services {
        grid-template-columns: 1fr 1fr;
    }

    .fi-domain-floating {
        transform: scale(.82);
    }

    .fi-domain-floating-one {
        transform-origin: left top;
    }

    .fi-domain-floating-two {
        transform-origin: right bottom;
    }

    .fi-dashboard-top {
        padding: 14px;
    }

    .fi-dashboard-domain {
        margin: 12px;
    }

    .fi-dashboard-stats {
        margin-left: 12px;
        margin-right: 12px;
    }

    .fi-dashboard-email {
        margin-left: 12px;
        margin-right: 12px;
    }

}




/* ==================================================================camera ===================== */

/* =====================================================
   MODERN CCTV / SECURITY SECTION
===================================================== */

.fi-camera-section {
    position: relative;
    overflow: hidden;
}


/* MAIN */

.CAMERA_12 {
    position: relative;

    min-height: 650px;

    display: flex;
    align-items: center;

    background-image:
        url("YOUR-CAMERA-IMAGE.jpg");

    background-size: cover;
    background-position: center;
}


/* DARK OVERLAY */

.fi-camera-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,25,38,.97) 0%,
            rgba(5,35,50,.88) 43%,
            rgba(5,35,50,.55) 72%,
            rgba(5,25,38,.82) 100%
        );
}


/* BLUE LIGHT */

.CAMERA_12::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -150px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,174,230,.20),
            transparent 68%
        );

    pointer-events: none;
}


/* =====================================================
   CONTAINER
===================================================== */

.fi-camera-container {
    position: relative;
    z-index: 3;

    width: 92%;
    max-width: 1380px;

    min-height: 650px;

    margin: auto;

    display: grid;

    grid-template-columns: 48% 52%;

    align-items: center;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.fi-camera-content {
    padding-right: 45px;
}


/* LABEL */

.fi-camera-label {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 9px 15px;

    border-radius: 50px;

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

    border: 1px solid rgba(255,255,255,.14);

    color: #62d3f3;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    backdrop-filter: blur(10px);
}


.fi-camera-label span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #24c7ed;

    box-shadow:
        0 0 0 5px rgba(36,199,237,.12);
}


/* HEADING */

.fi-camera-content h1 {
    max-width: 650px;

    margin: 28px 0 18px;

    color: #fff;

    font-size: clamp(45px, 5vw, 72px);

    line-height: 1.02;

    letter-spacing: -3px;

    font-weight: 800;
}


.fi-camera-content h1 strong {
    display: block;

    color: #46c8ed;

    font-weight: 800;
}


/* DESCRIPTION */

.fi-camera-content > p {
    max-width: 570px;

    margin-bottom: 30px;

    color: rgba(225,242,248,.72);

    font-size: 15px;

    line-height: 1.8;
}


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

.fi-camera-buttons {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 40px;
}


.fi-camera-primary {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding: 14px 20px;

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #0789c7,
            #10bce5
        );

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    box-shadow:
        0 15px 35px rgba(0,160,220,.25);

    transition: .3s ease;
}


.fi-camera-primary:hover {
    color: #fff;

    transform: translateY(-3px);
}


.fi-camera-primary span {
    font-size: 17px;
}


.fi-camera-secondary {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: rgba(255,255,255,.78);

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    transition: .3s ease;
}


.fi-camera-secondary:hover {
    color: #52ccef;
}


.fi-camera-secondary span {
    font-size: 17px;
}


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

.fi-camera-features {
    display: flex;

    gap: 12px;
}


.fi-camera-feature {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 13px;

    border-radius: 11px;

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

    border: 1px solid rgba(255,255,255,.10);

    backdrop-filter: blur(10px);
}


.fi-camera-feature-icon {
    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 8px;

    color: #51ccef;

    background: rgba(30,190,235,.12);

    font-size: 9px;

    font-weight: 800;
}


.fi-camera-feature strong {
    display: block;

    color: #fff;

    font-size: 9px;
}


.fi-camera-feature small {
    display: block;

    margin-top: 3px;

    color: rgba(255,255,255,.48);

    font-size: 7px;
}


/* =====================================================
   RIGHT VISUAL
===================================================== */

.fi-camera-visual {
    position: relative;

    height: 560px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =====================================================
   MAIN SECURITY CARD
===================================================== */

.fi-camera-main-card {
    position: relative;

    z-index: 4;

    width: 560px;

    max-width: 90%;

    overflow: hidden;

    border-radius: 20px;

    background: rgba(13,38,52,.92);

    border: 1px solid rgba(130,220,240,.16);

    box-shadow:
        0 35px 80px rgba(0,0,0,.38);

    backdrop-filter: blur(15px);

    transform: rotate(-2deg);
}


/* HEADER */

.fi-camera-card-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px 18px;

    color: #73d7ef;

    border-bottom: 1px solid rgba(255,255,255,.08);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}


.fi-camera-card-header > div {
    display: flex;

    align-items: center;

    gap: 7px;
}


.fi-camera-card-header small {
    color: rgba(255,255,255,.4);

    font-size: 8px;
}


/* LIVE DOT */

.fi-camera-live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #20d59a;

    box-shadow:
        0 0 0 5px rgba(32,213,154,.10);
}


/* =====================================================
   CAMERA SCREEN
===================================================== */

.fi-camera-screen {
    position: relative;

    height: 285px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(15,58,75,.8),
            rgba(6,30,43,.95)
        );
}


/* CAMERA IMAGE */

.fi-camera-screen::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        url("YOUR-CAMERA-IMAGE.jpg");

    background-size: cover;
    background-position: center;

    opacity: .28;

    filter: saturate(.7);
}


/* SCREEN GRID */

.fi-camera-screen-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(80,210,240,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(80,210,240,.08) 1px,
            transparent 1px
        );

    background-size: 45px 45px;
}


/* CAMERA STATUS */

.fi-camera-status {
    position: absolute;

    left: 15px;
    top: 15px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 9px;

    border-radius: 6px;

    color: #d8f6fc;

    background: rgba(0,0,0,.45);

    font-size: 7px;

    font-weight: 700;
}


.fi-camera-status span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #16d99c;
}


/* TIME */

.fi-camera-time {
    position: absolute;

    right: 15px;
    top: 15px;

    color: rgba(255,255,255,.65);

    font-family: monospace;

    font-size: 9px;
}


/* MOTION */

.fi-camera-detection {
    position: absolute;

    left: 50%;
    bottom: 20px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border-radius: 6px;

    color: #fff;

    background: rgba(225,70,70,.75);

    font-size: 7px;

    font-weight: 700;
}


.fi-camera-detection span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #fff;
}


/* =====================================================
   BOTTOM STATS
===================================================== */

.fi-camera-card-bottom {
    display: grid;

    grid-template-columns: repeat(3,1fr);
}


.fi-camera-card-bottom div {
    padding: 16px;

    text-align: center;

    border-right: 1px solid rgba(255,255,255,.07);
}


.fi-camera-card-bottom div:last-child {
    border-right: 0;
}


.fi-camera-card-bottom strong {
    display: block;

    color: #55ccef;

    font-size: 17px;
}


.fi-camera-card-bottom span {
    display: block;

    margin-top: 3px;

    color: rgba(255,255,255,.4);

    font-size: 7px;
}


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

.fi-camera-floating {
    position: absolute;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 14px;

    border-radius: 12px;

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

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

    backdrop-filter: blur(12px);
}


.fi-camera-floating-icon,
.fi-camera-ai {
    width: 33px;
    height: 33px;

    display: flex;

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

    border-radius: 8px;

    color: #078bc7;

    background: #e6f7fc;

    font-size: 11px;

    font-weight: 800;
}


.fi-camera-floating small {
    display: block;

    color: #91a2aa;

    font-size: 6px;

    font-weight: 800;
}


.fi-camera-floating strong {
    display: block;

    margin-top: 3px;

    color: #294e5e;

    font-size: 9px;
}


.fi-camera-floating-one {
    left: -5px;
    top: 80px;
}


.fi-camera-floating-two {
    right: -5px;
    bottom: 80px;
}


/* =====================================================
   DECORATIVE CAMERA
===================================================== */

.fi-camera-device {
    position: absolute;

    z-index: 5;

    right: 20px;
    top: 25px;

    width: 125px;
    height: 70px;

    transform: rotate(12deg);

    filter:
        drop-shadow(
            0 20px 25px rgba(0,0,0,.4)
        );
}


.fi-camera-device-body {
    position: absolute;

    width: 95px;
    height: 55px;

    right: 0;
    top: 8px;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #d9e4e7,
            #7c949d
        );
}


.fi-camera-device-lens {
    position: absolute;

    z-index: 2;

    left: 0;
    top: 8px;

    width: 58px;
    height: 58px;

    display: flex;

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

    border-radius: 50%;

    background: #182d36;

    border: 7px solid #81979e;

    box-shadow:
        inset 0 0 20px rgba(0,0,0,.8);
}


.fi-camera-device-lens span {
    width: 22px;
    height: 22px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #6bd8ef,
            #08151c 55%
        );
}


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

.fi-camera-circle {
    position: absolute;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    border: 1px solid rgba(77,204,235,.13);
}


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

@media (max-width: 1100px) {

    .fi-camera-container {
        grid-template-columns: 1fr;

        gap: 40px;

        padding: 70px 0;
    }

    .fi-camera-content {
        padding-right: 0;
    }

    .fi-camera-content h1 {
        font-size: 58px;
    }

    .fi-camera-visual {
        height: 550px;
    }

}


@media (max-width: 700px) {

    .CAMERA_12 {
        min-height: auto;
    }

    .fi-camera-container {
        width: 94%;

        padding: 60px 0;
    }

    .fi-camera-content h1 {
        font-size: 43px;

        letter-spacing: -1.5px;
    }

    .fi-camera-content > p {
        font-size: 14px;
    }

    .fi-camera-buttons {
        flex-direction: column;

        align-items: flex-start;
    }

    .fi-camera-features {
        flex-wrap: wrap;
    }

    .fi-camera-visual {
        height: 470px;
    }

    .fi-camera-main-card {
        max-width: 100%;
    }

    .fi-camera-screen {
        height: 230px;
    }

    .fi-camera-floating-one {
        left: -5px;
        top: 35px;
    }

    .fi-camera-floating-two {
        right: -5px;
        bottom: 35px;
    }

    .fi-camera-device {
        transform: scale(.75) rotate(12deg);
        transform-origin: right top;
    }

    .fi-camera-circle {
        display: none;
    }

}


@media (max-width: 480px) {

    .fi-camera-content h1 {
        font-size: 36px;
    }

    .fi-camera-feature {
        width: 100%;
    }

    .fi-camera-visual {
        height: 420px;
    }

    .fi-camera-card-header {
        padding: 12px;
    }

    .fi-camera-screen {
        height: 200px;
    }

    .fi-camera-card-bottom div {
        padding: 11px 5px;
    }

    .fi-camera-floating {
        transform: scale(.78);
    }

    .fi-camera-floating-one {
        transform-origin: left top;
    }

    .fi-camera-floating-two {
        transform-origin: right bottom;
    }

}


/* =====================================================
   MODERN CCTV INSTALLATION SECTION
===================================================== */

.fi-cctv-section {
    position: relative;
    overflow: hidden;

    padding: 95px 0;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(0,170,230,.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 5% 85%,
            rgba(20,100,180,.08),
            transparent 30%
        ),
        #eef8fc;
}


/* DOT BACKGROUND */

.fi-cctv-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(20,110,150,.15) 1px,
            transparent 1px
        );

    background-size: 25px 25px;

    opacity: .32;
}


/* CONTAINER */

.fi-cctv-container {
    position: relative;
    z-index: 2;

    width: 92%;
    max-width: 1380px;

    margin: auto;

    display: grid;

    grid-template-columns: minmax(0, 1fr) 450px;

    gap: 55px;

    align-items: start;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.fi-cctv-content {
    min-width: 0;
}


/* LABEL */

.fi-cctv-label {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 9px 16px;

    border-radius: 50px;

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

    border: 1px solid rgba(0,120,180,.14);

    color: #087dbb;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;
}


.fi-cctv-label span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #00a8df;

    box-shadow:
        0 0 0 5px rgba(0,168,223,.12);
}


/* HEADING */

.fi-cctv-content > h2 {
    margin: 26px 0 17px;

    max-width: 700px;

    color: #123c4f;

    font-size: clamp(45px, 4.7vw, 68px);

    line-height: 1.02;

    letter-spacing: -2.7px;

    font-weight: 800;
}


.fi-cctv-content > h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #087fc1,
            #00b8df
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* INTRO */

.fi-cctv-intro {
    max-width: 780px;

    margin-bottom: 42px;

    color: #657f8c;

    font-size: 15px;

    line-height: 1.85;
}


.fi-cctv-intro strong {
    color: #24576c;
}


/* =====================================================
   BLOCK
===================================================== */

.fi-cctv-block {
    margin-top: 42px;
}


/* HEADING */

.fi-cctv-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 18px;
}


.fi-cctv-heading > span {
    color: #078dcc;

    font-size: 9px;

    font-weight: 800;
}


.fi-cctv-heading h3 {
    margin: 0;

    color: #244c5d;

    font-size: 20px;

    font-weight: 800;
}


/* =====================================================
   WHY CHOOSE GRID
===================================================== */

.fi-cctv-choice-grid {
    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 11px;
}


.fi-cctv-choice-grid > div {
    padding: 18px;

    border-radius: 15px;

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

    border: 1px solid rgba(255,255,255,.95);

    box-shadow:
        0 10px 30px rgba(30,90,120,.05);

    transition: .3s ease;
}


.fi-cctv-choice-grid > div:hover {
    transform: translateY(-4px);

    background: #fff;

    box-shadow:
        0 18px 40px rgba(30,90,120,.10);
}


.fi-cctv-choice-grid b {
    display: flex;

    width: 30px;
    height: 30px;

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

    margin-bottom: 10px;

    border-radius: 8px;

    color: #078bc8;

    background: #e7f7fc;
}


.fi-cctv-choice-grid strong {
    display: block;

    color: #315769;

    font-size: 12px;
}


.fi-cctv-choice-grid p {
    margin: 6px 0 0;

    color: #81959e;

    font-size: 9px;

    line-height: 1.6;
}


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

.fi-cctv-services {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 11px;
}


.fi-cctv-service {
    display: flex;

    gap: 13px;

    padding: 18px;

    border-radius: 15px;

    background: #fff;

    border: 1px solid #e1edf1;

    transition: .3s ease;
}


.fi-cctv-service:hover {
    transform: translateY(-3px);

    border-color: #b9e2ef;
}


.fi-cctv-service-number {
    min-width: 31px;
    height: 31px;

    display: flex;

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

    border-radius: 8px;

    color: #078bc8;

    background: #e7f7fc;

    font-size: 8px;

    font-weight: 800;
}


.fi-cctv-service h4 {
    margin: 0 0 9px;

    color: #315667;

    font-size: 12px;
}


.fi-cctv-service ul {
    padding: 0;
    margin: 0;

    list-style: none;
}


.fi-cctv-service li {
    position: relative;

    padding-left: 13px;

    margin-top: 5px;

    color: #7b919b;

    font-size: 8px;

    line-height: 1.5;
}


.fi-cctv-service li::before {
    content: "•";

    position: absolute;
    left: 0;

    color: #0792cd;

    font-size: 13px;
}


/* =====================================================
   BENEFITS
===================================================== */

.fi-cctv-benefits {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 10px;
}


.fi-cctv-benefits > div {
    padding: 15px;

    border-radius: 13px;

    background: #fff;

    border: 1px solid #e3eef2;
}


.fi-cctv-benefits span {
    font-size: 17px;
}


.fi-cctv-benefits strong {
    display: block;

    margin-top: 7px;

    color: #355b6b;

    font-size: 10px;
}


.fi-cctv-benefits small {
    display: block;

    margin-top: 4px;

    color: #8498a1;

    font-size: 8px;

    line-height: 1.5;
}


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

.fi-cctv-process {
    display: grid;

    grid-template-columns: repeat(5,1fr);

    gap: 8px;
}


.fi-cctv-process > div {
    position: relative;

    padding: 15px;

    min-height: 125px;

    border-radius: 13px;

    background: #123f54;

    overflow: hidden;
}


.fi-cctv-process > div::after {
    content: "→";

    position: absolute;

    right: 10px;
    top: 9px;

    color: rgba(255,255,255,.13);

    font-size: 20px;
}


.fi-cctv-process span {
    color: #54caeb;

    font-size: 8px;

    font-weight: 800;
}


.fi-cctv-process strong {
    display: block;

    margin-top: 9px;

    color: #fff;

    font-size: 10px;
}


.fi-cctv-process p {
    margin: 6px 0 0;

    color: #b5d3dc;

    font-size: 8px;

    line-height: 1.5;
}


/* =====================================================
   ESSENTIAL
===================================================== */

.fi-cctv-essential {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 10px;
}


.fi-cctv-essential > div {
    padding: 17px;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f3fbfe
        );

    border: 1px solid #e0edf2;
}


.fi-cctv-essential strong {
    color: #315a6b;

    font-size: 10px;
}


.fi-cctv-essential p {
    margin: 6px 0 0;

    color: #82969f;

    font-size: 8px;

    line-height: 1.55;
}


/* =====================================================
   EXCLUSIVE
===================================================== */

.fi-cctv-exclusive {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.fi-cctv-exclusive span {
    padding: 9px 12px;

    border-radius: 8px;

    color: #567684;

    background: #fff;

    border: 1px solid #e1edf1;

    font-size: 8px;
}


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

.fi-cctv-cta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-top: 45px;

    padding: 25px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #123e53,
            #0b5874
        );

    box-shadow:
        0 20px 45px rgba(15,70,95,.17);
}


.fi-cctv-cta small {
    color: #58caeb;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.1px;
}


.fi-cctv-cta h3 {
    margin: 7px 0;

    color: #fff;

    font-size: 20px;
}


.fi-cctv-cta h3 span {
    color: #57caeb;
}


.fi-cctv-cta p {
    margin: 0;

    color: #b9d7df;

    font-size: 9px;
}


.fi-cctv-cta > a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    white-space: nowrap;

    padding: 12px 16px;

    border-radius: 9px;

    color: #fff;

    background: #078dc9;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;
}


.fi-cctv-cta > a span {
    font-size: 15px;
}


/* =====================================================
   RIGHT SECURITY PANEL
===================================================== */

.fi-cctv-right {
    position: sticky;

    top: 30px;
}


/* MAIN CARD */

.fi-cctv-security-card {
    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #0b2736,
            #09202d
        );

    border: 1px solid rgba(91,211,238,.14);

    box-shadow:
        0 35px 75px rgba(15,65,85,.25);
}


/* HEADER */

.fi-cctv-card-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 17px 18px;

    border-bottom: 1px solid rgba(255,255,255,.07);

    color: #63d3ee;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}


.fi-cctv-card-top div {
    display: flex;

    align-items: center;

    gap: 7px;
}


.fi-cctv-card-top strong {
    color: rgba(255,255,255,.45);

    font-size: 8px;
}


/* LIVE */

.fi-cctv-live {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #15d69a;

    box-shadow:
        0 0 0 5px rgba(21,214,154,.10);
}


/* =====================================================
   CAMERA VIEW
===================================================== */

.fi-cctv-camera-view {
    position: relative;

    height: 300px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 55%,
            rgba(25,137,171,.32),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #123f50,
            #071c29
        );
}


/* GRID */

.fi-cctv-camera-view::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(75,207,235,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(75,207,235,.07) 1px,
            transparent 1px
        );

    background-size: 38px 38px;
}


/* SCAN */

.fi-cctv-scan {
    position: absolute;

    left: 0;
    right: 0;

    top: 30%;

    height: 1px;

    background: rgba(75,218,242,.45);

    box-shadow:
        0 0 15px rgba(75,218,242,.45);

    animation: fiCctvScan 4s linear infinite;
}


@keyframes fiCctvScan {

    0% {
        top: 10%;
    }

    50% {
        top: 90%;
    }

    100% {
        top: 10%;
    }

}


/* CAMERA BODY */

.fi-cctv-camera-shape {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 190px;
    height: 115px;

    transform:
        translate(-50%,-50%)
        rotate(-7deg);
}


.fi-cctv-camera-body {
    position: absolute;

    right: 0;
    top: 18px;

    width: 150px;
    height: 78px;

    border-radius: 16px 22px 22px 16px;

    background:
        linear-gradient(
            145deg,
            #eef5f7,
            #91aab3
        );

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


/* LENS */

.fi-cctv-lens {
    position: absolute;

    z-index: 2;

    left: 0;
    top: 18px;

    width: 88px;
    height: 88px;

    display: flex;

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

    border-radius: 50%;

    background: #122a34;

    border: 9px solid #8299a1;

    box-shadow:
        inset 0 0 25px #000,
        0 15px 30px rgba(0,0,0,.4);
}


.fi-cctv-lens::before {
    content: "";

    position: absolute;

    inset: 9px;

    border-radius: 50%;

    border: 2px dotted #7cd5e8;
}


.fi-cctv-lens span {
    width: 31px;
    height: 31px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #8ce8f5,
            #06131a 58%
        );

    box-shadow:
        0 0 15px rgba(67,210,239,.35);
}


/* LABEL */

.fi-cctv-view-label {
    position: absolute;

    left: 14px;
    top: 14px;

    padding: 7px 9px;

    border-radius: 5px;

    color: #d5f6fb;

    background: rgba(0,0,0,.35);

    font-size: 7px;
}


/* RECORDING */

.fi-cctv-recording {
    position: absolute;

    right: 14px;
    top: 14px;

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 7px 9px;

    border-radius: 5px;

    color: #fff;

    background: rgba(190,45,55,.7);

    font-size: 7px;

    font-weight: 700;
}


.fi-cctv-recording span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #fff;
}


/* =====================================================
   STATS
===================================================== */

.fi-cctv-stats {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
}


.fi-cctv-stats div {
    padding: 14px;

    text-align: center;

    border-right: 1px solid rgba(255,255,255,.07);
}


.fi-cctv-stats div:last-child {
    border-right: 0;
}


.fi-cctv-stats strong {
    display: block;

    color: #5fd0ec;

    font-size: 16px;
}


.fi-cctv-stats span {
    display: block;

    margin-top: 3px;

    color: rgba(255,255,255,.38);

    font-size: 7px;
}


/* =====================================================
   CAMERA TYPES
===================================================== */

.fi-cctv-types {
    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 7px;

    padding: 14px;
}


.fi-cctv-type {
    padding: 10px 5px;

    text-align: center;

    border-radius: 9px;

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

    border: 1px solid rgba(255,255,255,.06);
}


.fi-cctv-type.active {
    background: rgba(36,191,230,.10);

    border-color: rgba(36,191,230,.28);
}


.fi-cctv-type > span {
    display: block;

    margin-top: 7px;

    color: rgba(255,255,255,.55);

    font-size: 7px;
}


/* CAMERA MINI SHAPES */

.fi-type-camera {
    position: relative;

    width: 40px;
    height: 25px;

    margin: auto;
}


.fi-type-camera.bullet::before {
    content: "";

    position: absolute;

    width: 30px;
    height: 18px;

    right: 0;
    top: 3px;

    border-radius: 5px 10px 10px 5px;

    background: #b9cbd0;
}


.fi-type-camera.bullet::after {
    content: "";

    position: absolute;

    left: 0;
    top: 6px;

    width: 17px;
    height: 13px;

    border-radius: 50%;

    background: #162b34;

    border: 3px solid #829ba3;
}


.fi-type-camera.dome {
    width: 32px;
    height: 19px;

    border-radius: 18px 18px 8px 8px;

    background: #c8d7da;

    border-bottom: 4px solid #758f97;
}


.fi-type-camera.turret {
    width: 30px;
    height: 22px;

    border-radius: 8px 8px 15px 15px;

    background: #c7d5d8;
}


.fi-type-camera.turret::after {
    content: "";

    position: absolute;

    width: 13px;
    height: 13px;

    left: 8px;
    bottom: -3px;

    border-radius: 50%;

    background: #162b34;
}


.fi-type-camera.ip {
    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: #d4e0e2;

    border: 4px solid #849ba2;
}


.fi-type-camera.ip::after {
    content: "";

    position: absolute;

    width: 9px;
    height: 9px;

    left: 6px;
    top: 6px;

    border-radius: 50%;

    background: #132b34;
}


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

.fi-cctv-floating-card {
    position: absolute;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 14px;

    border-radius: 12px;

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

    box-shadow:
        0 18px 40px rgba(0,0,0,.24);
}


.fi-cctv-floating-card > div {
    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 8px;

    color: #0789c7;

    background: #e7f7fc;

    font-size: 10px;

    font-weight: 800;
}


.fi-cctv-floating-card small {
    display: block;

    color: #8da1aa;

    font-size: 6px;

    font-weight: 800;
}


.fi-cctv-floating-card strong {
    display: block;

    margin-top: 3px;

    color: #2e5363;

    font-size: 9px;
}


.fi-cctv-floating-one {
    left: -15px;
    top: 65px;
}


.fi-cctv-floating-two {
    right: -15px;
    bottom: 70px;
}


/* =====================================================
   QUICK SERVICES
===================================================== */

.fi-cctv-quick {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 8px;

    margin-top: 18px;
}


.fi-cctv-quick div {
    padding: 13px;

    border-radius: 11px;

    background: #fff;

    border: 1px solid #e1edf1;
}


.fi-cctv-quick span {
    display: block;

    color: #078dcc;

    font-size: 7px;
}


.fi-cctv-quick strong {
    display: block;

    margin-top: 5px;

    color: #426474;

    font-size: 9px;
}


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

@media (max-width: 1100px) {

    .fi-cctv-container {
        grid-template-columns: 1fr;
    }

    .fi-cctv-right {
        position: relative;

        top: auto;
    }

    .fi-cctv-content > h2 {
        font-size: 58px;
    }

}


@media (max-width: 700px) {

    .fi-cctv-section {
        padding: 65px 0;
    }

    .fi-cctv-container {
        width: 94%;
    }

    .fi-cctv-content > h2 {
        font-size: 43px;

        letter-spacing: -1.5px;
    }

    .fi-cctv-intro {
        font-size: 14px;
    }

    .fi-cctv-choice-grid,
    .fi-cctv-services {
        grid-template-columns: 1fr;
    }

    .fi-cctv-benefits {
        grid-template-columns: 1fr 1fr;
    }

    .fi-cctv-essential {
        grid-template-columns: 1fr 1fr;
    }

    .fi-cctv-process {
        grid-template-columns: 1fr 1fr;
    }

    .fi-cctv-cta {
        flex-direction: column;

        align-items: flex-start;
    }

    .fi-cctv-visual {
        min-height: 500px;
    }

    .fi-cctv-floating-one {
        left: -5px;
    }

    .fi-cctv-floating-two {
        right: -5px;
    }

}


@media (max-width: 480px) {

    .fi-cctv-content > h2 {
        font-size: 36px;
    }

    .fi-cctv-benefits,
    .fi-cctv-essential,
    .fi-cctv-process {
        grid-template-columns: 1fr;
    }

    .fi-cctv-types {
        grid-template-columns: repeat(2,1fr);
    }

    .fi-cctv-quick {
        grid-template-columns: 1fr;
    }

    .fi-cctv-floating-card {
        transform: scale(.8);
    }

    .fi-cctv-floating-one {
        transform-origin: left top;
    }

    .fi-cctv-floating-two {
        transform-origin: right bottom;
    }

}

/* 
====================================support html =============================== */



/* =====================================================
   CONTAINER
===================================================== */

.fi-support-container {
    position: relative;

    width: 92%;
    max-width: 1380px;

    margin: auto;
}


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

.fi-support-hero {
    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(0,174,230,.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(0,115,180,.10),
            transparent 28%
        ),
        #edf8fc;
}


.fi-support-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(0,130,180,.16) 1px,
            transparent 1px
        );

    background-size: 25px 25px;

    opacity: .35;
}


.fi-support-hero .fi-support-container {
    z-index: 2;

    display: grid;

    grid-template-columns: 1fr 500px;

    align-items: center;

    gap: 70px;
}


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

.fi-support-hero-content {
    max-width: 700px;
}


.fi-support-badge {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 9px 15px;

    border-radius: 50px;

    color: #087eb9;

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

    border: 1px solid rgba(0,120,180,.13);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.fi-support-badge span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #08a6d8;

    box-shadow:
        0 0 0 5px rgba(8,166,216,.11);
}


.fi-support-hero h1 {
    margin: 27px 0 18px;

    color: #123c4f;

    font-size: clamp(48px, 5.5vw, 76px);

    line-height: 1;

    letter-spacing: -3px;
}


.fi-support-hero h1 span {
    display: block;

    color: #078dc8;
}


.fi-support-hero-content > p {
    max-width: 650px;

    color: #6b8591;

    font-size: 15px;

    line-height: 1.85;
}


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

.fi-support-buttons {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 30px;
}


.fi-support-primary {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 20px;

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #087fc0,
            #08b3df
        );

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    box-shadow:
        0 15px 30px rgba(0,145,205,.20);
}


.fi-support-primary span {
    font-size: 16px;
}


.fi-support-secondary {
    color: #456b7b;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;
}


.fi-support-secondary span {
    margin-left: 5px;

    color: #078dc8;
}


/* =====================================================
   STATUS
===================================================== */

.fi-support-status {
    width: fit-content;

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 30px;

    padding: 10px 14px;

    border-radius: 12px;

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

    border: 1px solid #deedf2;
}


.fi-status-dot {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #11b986;

    box-shadow:
        0 0 0 5px rgba(17,185,134,.10);
}


.fi-support-status strong {
    display: block;

    color: #34596a;

    font-size: 9px;
}


.fi-support-status small {
    display: block;

    margin-top: 3px;

    color: #8ba0a8;

    font-size: 7px;
}


.fi-support-status > b {
    margin-left: 15px;

    color: #078dc8;

    font-size: 10px;
}


/* =====================================================
   SUPPORT DASHBOARD
===================================================== */

.fi-support-visual {
    position: relative;

    min-height: 550px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.fi-support-glow {
    position: absolute;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,173,228,.18),
            transparent 68%
        );
}


.fi-support-dashboard {
    position: relative;

    z-index: 3;

    width: 100%;

    overflow: hidden;

    border-radius: 23px;

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

    border: 1px solid #fff;

    box-shadow:
        0 35px 75px rgba(25,85,110,.17);

    backdrop-filter: blur(15px);
}


/* HEADER */

.fi-dashboard-header {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 18px;

    border-bottom: 1px solid #e4eef2;
}


.fi-dashboard-brand {
    display: flex;

    align-items: center;

    gap: 10px;
}


.fi-brand-icon {
    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #087fc0,
            #0bb8df
        );

    font-size: 11px;

    font-weight: 800;
}


.fi-dashboard-brand strong {
    display: block;

    color: #2b5364;

    font-size: 12px;
}


.fi-dashboard-brand small {
    display: block;

    margin-top: 3px;

    color: #91a3aa;

    font-size: 7px;
}


.fi-online {
    display: flex;

    align-items: center;

    gap: 6px;

    padding: 6px 9px;

    border-radius: 50px;

    color: #079a71;

    background: #eafaf5;

    font-size: 7px;

    font-weight: 800;
}


.fi-online i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #10b885;
}


/* SEARCH */

.fi-support-search {
    display: flex;

    align-items: center;

    gap: 10px;

    margin: 18px;

    padding: 13px;

    border-radius: 10px;

    background: #f3f9fb;

    border: 1px solid #e1edf1;

    color: #8ba1aa;

    font-size: 10px;
}


.fi-support-search > span:first-child {
    color: #078dc8;

    font-size: 17px;
}


.fi-search-text {
    flex: 1;
}


.fi-support-search b {
    padding: 6px 9px;

    border-radius: 6px;

    color: #fff;

    background: #078dc8;

    font-size: 7px;
}


/* CATEGORY */

.fi-support-category-title {
    margin: 0 18px 10px;

    color: #4c6d7b;

    font-size: 9px;

    font-weight: 800;
}


.fi-support-categories {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 9px;

    padding: 0 18px;
}


.fi-support-categories > div {
    padding: 14px;

    border-radius: 12px;

    background: #f7fbfd;

    border: 1px solid #e3eef2;

    transition: .3s ease;
}


.fi-support-categories > div:hover {
    transform: translateY(-3px);

    background: #fff;

    border-color: #bde3ee;
}


.fi-support-categories span {
    color: #078dc8;

    font-size: 7px;

    font-weight: 800;
}


.fi-support-categories strong {
    display: block;

    margin-top: 7px;

    color: #365c6c;

    font-size: 10px;
}


.fi-support-categories small {
    display: block;

    margin-top: 4px;

    color: #91a2a9;

    font-size: 7px;
}


/* TICKET */

.fi-support-ticket {
    display: flex;

    align-items: center;

    gap: 10px;

    margin: 18px;

    padding: 14px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #123f54,
            #0b627d
        );
}


.fi-ticket-icon {
    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 9px;

    color: #fff;

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

    font-weight: 800;
}


.fi-support-ticket small {
    display: block;

    color: #62d1ec;

    font-size: 6px;

    font-weight: 800;
}


.fi-support-ticket strong {
    display: block;

    margin-top: 3px;

    color: #fff;

    font-size: 9px;
}


.fi-support-ticket > b {
    margin-left: auto;

    color: #fff;

    font-size: 10px;
}


/* =====================================================
   FLOATING
===================================================== */

.fi-support-floating {
    position: absolute;

    z-index: 7;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 14px;

    border-radius: 12px;

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

    box-shadow:
        0 18px 40px rgba(20,80,110,.16);
}


.fi-support-floating > div {
    width: 33px;
    height: 33px;

    display: flex;

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

    border-radius: 9px;

    color: #078dc8;

    background: #e5f7fc;

    font-size: 9px;

    font-weight: 800;
}


.fi-support-floating small {
    display: block;

    color: #91a3aa;

    font-size: 6px;
}


.fi-support-floating strong {
    display: block;

    margin-top: 3px;

    color: #315667;

    font-size: 9px;
}


.fi-floating-one {
    left: -20px;
    top: 65px;
}


.fi-floating-two {
    right: -20px;
    bottom: 65px;
}


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

.fi-support-options,
.fi-support-process-section,
.fi-support-faq {
    position: relative;

    padding: 90px 0;

    background: #fff;
}


.fi-section-heading {
    max-width: 650px;

    margin-bottom: 35px;
}


.fi-section-heading > span {
    color: #078dc8;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.2px;
}


.fi-section-heading h2 {
    margin: 10px 0;

    color: #173f51;

    font-size: clamp(32px,4vw,48px);

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.fi-section-heading h2 strong {
    color: #078dc8;
}


.fi-section-heading p {
    margin: 0;

    color: #80949d;

    font-size: 13px;

    line-height: 1.7;
}


/* =====================================================
   SUPPORT OPTIONS
===================================================== */

.fi-support-option-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 15px;
}


.fi-support-option {
    position: relative;

    padding: 25px;

    border-radius: 18px;

    background: #f7fbfd;

    border: 1px solid #e1edf1;

    transition: .3s ease;
}


.fi-support-option:hover {
    transform: translateY(-5px);

    background: #fff;

    box-shadow:
        0 20px 45px rgba(25,90,115,.09);
}


.fi-option-number {
    position: absolute;

    right: 18px;
    top: 18px;

    color: #c4d8df;

    font-size: 9px;

    font-weight: 800;
}


.fi-option-icon {
    width: 44px;
    height: 44px;

    display: flex;

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

    border-radius: 12px;

    color: #078dc8;

    background: #e5f7fc;

    font-size: 17px;

    font-weight: 800;
}


.fi-support-option h3 {
    margin: 18px 0 8px;

    color: #2f5768;

    font-size: 16px;
}


.fi-support-option p {
    min-height: 55px;

    color: #80949d;

    font-size: 10px;

    line-height: 1.7;
}


.fi-support-option a {
    color: #078dc8;

    text-decoration: none;

    font-size: 9px;

    font-weight: 800;
}


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

.fi-support-process-section {
    background: #eef8fc;
}


.fi-support-process {
    display: flex;

    align-items: center;

    gap: 15px;
}


.fi-process-item {
    flex: 1;

    display: flex;

    gap: 13px;

    padding: 20px;

    border-radius: 15px;

    background: #fff;

    border: 1px solid #deedf2;
}


.fi-process-item > span {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 9px;

    color: #078dc8;

    background: #e6f7fc;

    font-size: 8px;

    font-weight: 800;
}


.fi-process-item h3 {
    margin: 0;

    color: #355b6b;

    font-size: 11px;
}


.fi-process-item p {
    margin: 6px 0 0;

    color: #8599a1;

    font-size: 8px;

    line-height: 1.55;
}


.fi-process-line {
    width: 35px;

    height: 1px;

    background: #a9d9e7;
}


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

.fi-faq-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;
}


.fi-faq-grid details {
    padding: 18px 20px;

    border-radius: 13px;

    background: #f7fbfd;

    border: 1px solid #e1edf1;
}


.fi-faq-grid summary {
    display: flex;

    align-items: center;
    justify-content: space-between;

    cursor: pointer;

    list-style: none;

    color: #345a6a;

    font-size: 11px;

    font-weight: 700;
}


.fi-faq-grid summary::-webkit-details-marker {
    display: none;
}


.fi-faq-grid summary span {
    color: #078dc8;

    font-size: 17px;
}


.fi-faq-grid details[open] summary span {
    transform: rotate(45deg);
}


.fi-faq-grid details p {
    margin: 12px 20px 0 0;

    color: #80959e;

    font-size: 9px;

    line-height: 1.7;
}


/* =====================================================
   CONTACT CTA
===================================================== */

.fi-support-contact {
    padding: 0 0 90px;

    background: #fff;
}


.fi-support-contact-inner {
    width: 92%;
    max-width: 1380px;

    margin: auto;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 40px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #123e53,
            #087694
        );

    box-shadow:
        0 25px 55px rgba(15,75,95,.18);
}


.fi-support-contact-inner > div > span {
    color: #5fd2ed;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}


.fi-support-contact h2 {
    margin: 8px 0;

    color: #fff;

    font-size: 30px;

    line-height: 1.1;
}


.fi-support-contact h2 strong {
    color: #5dd2ed;
}


.fi-support-contact p {
    margin: 0;

    color: #b7d4dd;

    font-size: 10px;
}


.fi-support-contact-inner > a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 19px;

    white-space: nowrap;

    border-radius: 9px;

    color: #fff;

    background: #0794cf;

    text-decoration: none;

    font-size: 9px;

    font-weight: 800;
}


.fi-support-contact-inner > a span {
    font-size: 15px;
}


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

@media (max-width: 1100px) {

    .fi-support-hero .fi-support-container {
        grid-template-columns: 1fr;
    }

    .fi-support-hero-content {
        max-width: 800px;
    }

    .fi-support-visual {
        max-width: 600px;

        width: 100%;

        margin: auto;
    }

}


@media (max-width: 750px) {

    .fi-support-hero {
        padding: 65px 0;
    }

    .fi-support-hero h1 {
        font-size: 48px;

        letter-spacing: -2px;
    }

    .fi-support-buttons {
        flex-wrap: wrap;
    }

    .fi-support-option-grid {
        grid-template-columns: 1fr;
    }

    .fi-support-process {
        flex-direction: column;

        align-items: stretch;
    }

    .fi-process-line {
        display: none;
    }

    .fi-faq-grid {
        grid-template-columns: 1fr;
    }

    .fi-support-contact-inner {
        flex-direction: column;

        align-items: flex-start;

        padding: 28px;
    }

}


@media (max-width: 480px) {

    .fi-support-container {
        width: 94%;
    }

    .fi-support-hero h1 {
        font-size: 39px;
    }

    .fi-support-hero-content > p {
        font-size: 13px;
    }

    .fi-support-status {
        width: 100%;
    }

    .fi-support-categories {
        grid-template-columns: 1fr;
    }

    .fi-support-dashboard {
        border-radius: 16px;
    }

    .fi-floating-one {
        left: -5px;
    }

    .fi-floating-two {
        right: -5px;
    }

    .fi-support-floating {
        transform: scale(.8);
    }

    .fi-floating-one {
        transform-origin: left top;
    }

    .fi-floating-two {
        transform-origin: right bottom;
    }

    .fi-support-contact h2 {
        font-size: 25px;
    }

}




/* =============================carrer=========================== */



/* =====================================================
   GLOBAL
===================================================== */



.fi-career-container {
    position: relative;
    width: 92%;
    max-width: 1380px;
    margin: auto;
}


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

.fi-career-hero {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(circle at 85% 15%,
            rgba(0, 171, 225, .15),
            transparent 30%),
        radial-gradient(circle at 10% 90%,
            rgba(0, 115, 180, .08),
            transparent 30%),
        #eef8fc;
}

.fi-career-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(0, 130, 180, .15) 1px,
            transparent 1px
        );

    background-size: 25px 25px;
    opacity: .35;
}


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

.fi-career-hero .fi-career-container {
    z-index: 2;

    display: grid;

    grid-template-columns: minmax(0, 1fr) 500px;

    align-items: center;

    gap: 70px;
}


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

.fi-career-hero-content {
    max-width: 720px;
}


/* BADGE */

.fi-career-badge {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 9px 15px;

    border-radius: 50px;

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

    border: 1px solid rgba(0, 120, 180, .14);

    color: #087fb9;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;
}

.fi-career-badge span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #08a7d9;

    box-shadow:
        0 0 0 5px rgba(8, 167, 217, .12);
}


/* HERO HEADING */

.fi-career-hero h1 {
    margin: 28px 0 18px;

    color: #123d50;

    font-size: clamp(50px, 5.5vw, 78px);

    line-height: .98;

    letter-spacing: -3.5px;

    font-weight: 800;
}

.fi-career-hero h1 span {
    display: block;

    color: #078dc8;
}


/* HERO DESCRIPTION */

.fi-career-hero-content > p {
    max-width: 650px;

    color: #6e8792;

    font-size: 15px;

    line-height: 1.85;
}


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

.fi-career-actions {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 30px;
}

.fi-career-primary {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 14px 20px;

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #087fc0,
            #08b5df
        );

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    box-shadow:
        0 15px 35px rgba(0, 145, 205, .22);
}

.fi-career-primary:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 20px 40px rgba(0, 145, 205, .30);
}

.fi-career-primary span {
    font-size: 16px;
}

.fi-career-secondary {
    color: #486c7c;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;
}

.fi-career-secondary:hover {
    color: #078dc8;
}

.fi-career-secondary span {
    margin-left: 5px;

    color: #078dc8;

    font-size: 15px;
}


/* =====================================================
   CAREER STATS
===================================================== */

.fi-career-stats {
    display: flex;

    gap: 0;

    margin-top: 42px;
}

.fi-career-stats div {
    min-width: 150px;

    padding-right: 25px;

    margin-right: 25px;

    border-right: 1px solid #d5e7ed;
}

.fi-career-stats div:last-child {
    border-right: 0;
}

.fi-career-stats strong {
    display: block;

    color: #078dc8;

    font-size: 25px;

    line-height: 1;
}

.fi-career-stats span {
    display: block;

    margin-top: 6px;

    color: #8398a0;

    font-size: 8px;

    font-weight: 600;
}


/* =====================================================
   RIGHT VISUAL
===================================================== */

.fi-career-visual {
    position: relative;

    min-height: 550px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* GLOW */

.fi-career-visual::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 174, 230, .17),
            transparent 68%
        );
}


/* =====================================================
   ORBITS
===================================================== */

.fi-career-orbit {
    position: absolute;

    border: 1px solid rgba(0, 155, 205, .14);

    border-radius: 50%;
}

.orbit-one {
    width: 460px;
    height: 460px;
}

.orbit-two {
    width: 360px;
    height: 360px;

    border-style: dashed;
}


/* =====================================================
   MAIN CAREER CARD
===================================================== */

.fi-career-main-card {
    position: relative;

    z-index: 3;

    width: 440px;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #123e52,
            #082431
        );

    border: 1px solid rgba(86, 211, 238, .15);

    box-shadow:
        0 35px 80px rgba(15, 70, 95, .28);

    transform: rotate(-2deg);
}


/* HEADER */

.fi-career-card-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 17px 19px;

    border-bottom: 1px solid rgba(255, 255, 255, .07);

    color: #65d1ed;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}

.fi-career-card-header > div {
    display: flex;

    align-items: center;

    gap: 7px;
}

.fi-career-card-header small {
    color: rgba(255,255,255,.38);

    font-size: 7px;
}


/* DOT */

.fi-career-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #15d59a;

    box-shadow:
        0 0 0 5px rgba(21, 213, 154, .1);
}


/* =====================================================
   CARD CONTENT
===================================================== */

.fi-career-card-content {
    padding: 35px 32px 30px;
}

.fi-career-card-label {
    color: #55cbe9;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.4px;
}

.fi-career-card-content h2 {
    margin: 15px 0;

    color: #fff;

    font-size: 48px;

    line-height: .98;

    letter-spacing: -2px;
}

.fi-career-card-content h2 span {
    color: #55cdec;
}

.fi-career-card-content p {
    max-width: 350px;

    color: rgba(220, 239, 245, .63);

    font-size: 10px;

    line-height: 1.7;
}


/* =====================================================
   PROGRESS
===================================================== */

.fi-career-progress {
    margin-top: 28px;
}

.fi-career-progress > div {
    display: flex;

    justify-content: space-between;

    color: rgba(255,255,255,.58);

    font-size: 7px;
}

.fi-career-progress b {
    color: #58d0ec;
}

.fi-career-progress i {
    display: block;

    height: 5px;

    margin-top: 8px;

    overflow: hidden;

    border-radius: 20px;

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

.fi-career-progress em {
    display: block;

    width: 88%;

    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #078cc6,
            #57d1ee
        );
}


/* =====================================================
   TAGS
===================================================== */

.fi-career-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 25px;
}

.fi-career-tags span {
    padding: 7px 10px;

    border-radius: 7px;

    color: rgba(255,255,255,.62);

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

    border: 1px solid rgba(255,255,255,.07);

    font-size: 7px;
}


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

.fi-career-card-footer {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(255,255,255,.07);
}

.fi-career-card-footer div {
    padding: 14px;

    text-align: center;

    border-right: 1px solid rgba(255,255,255,.07);
}

.fi-career-card-footer div:last-child {
    border-right: 0;
}

.fi-career-card-footer strong {
    display: block;

    color: #56cee9;

    font-size: 8px;
}

.fi-career-card-footer span {
    display: block;

    margin-top: 4px;

    color: rgba(255,255,255,.38);

    font-size: 7px;
}


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

.fi-career-floating {
    position: absolute;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 14px;

    border-radius: 12px;

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

    box-shadow:
        0 20px 45px rgba(20,80,110,.18);
}

.fi-career-float-icon {
    width: 33px;
    height: 33px;

    display: flex;

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

    border-radius: 9px;

    color: #078dc8;

    background: #e5f7fc;

    font-size: 13px;

    font-weight: 800;
}

.fi-career-floating small {
    display: block;

    color: #92a3aa;

    font-size: 6px;

    font-weight: 800;
}

.fi-career-floating strong {
    display: block;

    margin-top: 3px;

    color: #315767;

    font-size: 9px;
}

.career-float-one {
    left: -20px;
    top: 65px;
}

.career-float-two {
    right: -20px;
    bottom: 65px;
}


/* =====================================================
   SECTION HEADINGS
===================================================== */

.fi-career-heading {
    max-width: 700px;

    margin-bottom: 38px;
}

.fi-career-heading > span {
    color: #078dc8;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.3px;
}

.fi-career-heading h2 {
    margin: 10px 0;

    color: #173f51;

    font-size: clamp(35px, 4vw, 50px);

    line-height: 1.05;

    letter-spacing: -1.8px;
}

.fi-career-heading h2 strong {
    color: #078dc8;
}

.fi-career-heading p {
    margin: 0;

    color: #80949d;

    font-size: 13px;

    line-height: 1.7;
}


/* =====================================================
   BENEFITS SECTION
===================================================== */

.fi-career-benefits {
    position: relative;

    padding: 90px 0;

    background: #fff;
}

.fi-career-benefit-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 14px;
}

.fi-career-benefit {
    position: relative;

    min-height: 250px;

    padding: 25px;

    overflow: hidden;

    border-radius: 18px;

    background: #f7fbfd;

    border: 1px solid #e0edf1;

    transition: .3s ease;
}

.fi-career-benefit:hover {
    transform: translateY(-6px);

    background: #fff;

    box-shadow:
        0 20px 45px rgba(20,90,115,.10);
}

.fi-benefit-number {
    position: absolute;

    top: 18px;
    right: 20px;

    color: #c6dbe2;

    font-size: 9px;

    font-weight: 800;
}

.fi-benefit-icon {
    width: 45px;
    height: 45px;

    display: flex;

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

    border-radius: 12px;

    color: #078dc8;

    background: #e5f7fc;

    font-size: 17px;
}

.fi-career-benefit h3 {
    margin: 20px 0 8px;

    color: #31596a;

    font-size: 15px;
}

.fi-career-benefit p {
    margin: 0;

    color: #80949d;

    font-size: 10px;

    line-height: 1.7;
}


/* =====================================================
   JOBS SECTION
===================================================== */

.fi-career-jobs {
    padding: 90px 0;

    background: #eef8fc;
}


/* JOB LIST */

.fi-career-job-list {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


/* JOB CARD */

.fi-career-job {
    display: grid;

    grid-template-columns: 55px minmax(0, 1fr) 170px 90px;

    align-items: center;

    gap: 20px;

    padding: 20px;

    border-radius: 16px;

    background: #fff;

    border: 1px solid #dfedf2;

    transition: .3s ease;
}

.fi-career-job:hover {
    transform: translateX(5px);

    border-color: #b9dfe9;

    box-shadow:
        0 15px 35px rgba(25,90,115,.08);
}


/* NUMBER */

.fi-job-number {
    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 10px;

    color: #078dc8;

    background: #e7f7fc;

    font-size: 8px;

    font-weight: 800;
}


/* JOB MAIN */

.fi-job-main > span {
    color: #078dc8;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}

.fi-job-main h3 {
    margin: 5px 0;

    color: #315767;

    font-size: 16px;
}

.fi-job-main p {
    margin: 0;

    color: #82969f;

    font-size: 9px;
}


/* JOB TAGS */

.fi-job-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 9px;
}

.fi-job-tags b {
    padding: 5px 8px;

    border-radius: 5px;

    color: #64818d;

    background: #f1f8fa;

    font-size: 6px;
}


/* JOB INFO */

.fi-job-info {
    display: flex;

    flex-direction: column;

    gap: 6px;
}

.fi-job-info span {
    color: #8ba0a8;

    font-size: 7px;

    font-weight: 700;
}


/* APPLY */

.fi-job-apply {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 10px 12px;

    border-radius: 8px;

    color: #fff;

    background: #078dc8;

    text-decoration: none;

    font-size: 8px;

    font-weight: 700;
}

.fi-job-apply:hover {
    color: #fff;

    background: #086e9d;

    transform: translateY(-2px);
}


/* =====================================================
   CULTURE
===================================================== */

.fi-career-culture {
    padding: 90px 0;

    background: #fff;
}

.fi-culture-card {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

    padding: 50px;

    border-radius: 25px;

    background:
        linear-gradient(
            135deg,
            #103c50,
            #075d78
        );

    overflow: hidden;

    box-shadow:
        0 25px 60px rgba(20,80,100,.17);
}

.fi-culture-content > span {
    color: #59d0ec;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;
}

.fi-culture-content h2 {
    margin: 15px 0;

    color: #fff;

    font-size: 45px;

    line-height: 1;

    letter-spacing: -2px;
}

.fi-culture-content h2 strong {
    color: #59d0ec;
}

.fi-culture-content p {
    max-width: 500px;

    color: #b9d7df;

    font-size: 11px;

    line-height: 1.8;
}


/* CULTURE POINTS */

.fi-culture-points {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    align-content: center;
}

.fi-culture-points div {
    padding: 20px;

    border-radius: 13px;

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

    border: 1px solid rgba(255,255,255,.09);
}

.fi-culture-points b {
    display: block;

    color: #55cdec;

    font-size: 8px;
}

.fi-culture-points span {
    display: block;

    margin-top: 8px;

    color: #fff;

    font-size: 9px;

    font-weight: 700;
}


/* =====================================================
   APPLY SECTION
===================================================== */

.fi-career-apply {
    padding: 0 0 90px;

    background: #fff;
}

.fi-career-apply-inner {
    width: 92%;
    max-width: 1380px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 40px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            #123f53,
            #087695
        );
}

.fi-career-apply-inner small {
    color: #5bd1ec;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}

.fi-career-apply-inner h2 {
    margin: 8px 0;

    color: #fff;

    font-size: 31px;

    line-height: 1;
}

.fi-career-apply-inner h2 strong {
    color: #5bd1ec;
}

.fi-career-apply-inner p {
    margin: 7px 0 0;

    color: #b8d6de;

    font-size: 9px;
}

.fi-career-apply-inner > a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 19px;

    white-space: nowrap;

    border-radius: 9px;

    color: #fff;

    background: #078fcb;

    text-decoration: none;

    font-size: 9px;

    font-weight: 800;
}

.fi-career-apply-inner > a:hover {
    background: #06a9df;

    transform: translateY(-3px);
}

.fi-career-apply-inner > a span {
    font-size: 15px;
}


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

@media (max-width: 1150px) {

    .fi-career-hero .fi-career-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .fi-career-hero-content {
        max-width: 800px;
    }

    .fi-career-visual {
        max-width: 600px;

        width: 100%;

        margin: auto;
    }

    .fi-career-benefit-grid {
        grid-template-columns: 1fr 1fr;
    }

}


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

@media (max-width: 800px) {

    .fi-career-hero {
        padding: 70px 0;
    }

    .fi-career-hero h1 {
        font-size: 55px;

        letter-spacing: -2px;
    }

    .fi-career-actions {
        flex-wrap: wrap;
    }

    .fi-career-main-card {
        width: 420px;

        max-width: 90%;
    }

    .fi-career-job {
        grid-template-columns: 45px 1fr;

        gap: 15px;
    }

    .fi-job-info {
        grid-column: 2;
    }

    .fi-job-apply {
        grid-column: 2;

        width: fit-content;
    }

    .fi-culture-card {
        grid-template-columns: 1fr;

        padding: 35px;
    }

    .fi-career-apply-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


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

@media (max-width: 550px) {

    .fi-career-container {
        width: 94%;
    }

    .fi-career-hero {
        padding: 55px 0;
    }

    .fi-career-hero h1 {
        font-size: 42px;

        letter-spacing: -1.5px;
    }

    .fi-career-hero-content > p {
        font-size: 13px;
    }

    .fi-career-stats {
        flex-wrap: wrap;

        gap: 20px;
    }

    .fi-career-stats div {
        min-width: 110px;

        padding-right: 15px;

        margin-right: 0;
    }

    .fi-career-visual {
        min-height: 450px;
    }

    .fi-career-main-card {
        width: 100%;
    }

    .fi-career-card-content {
        padding: 28px 22px;
    }

    .fi-career-card-content h2 {
        font-size: 39px;
    }

    .fi-career-orbit {
        display: none;
    }

    .career-float-one {
        left: -5px;
        top: 30px;
    }

    .career-float-two {
        right: -5px;
        bottom: 30px;
    }

    .fi-career-floating {
        transform: scale(.8);
    }

    .career-float-one {
        transform-origin: left top;
    }

    .career-float-two {
        transform-origin: right bottom;
    }

    .fi-career-benefits,
    .fi-career-jobs,
    .fi-career-culture {
        padding: 65px 0;
    }

    .fi-career-benefit-grid {
        grid-template-columns: 1fr;
    }

    .fi-career-benefit {
        min-height: auto;
    }

    .fi-career-heading h2 {
        font-size: 34px;
    }

    .fi-career-job {
        grid-template-columns: 40px 1fr;

        padding: 16px;
    }

    .fi-job-main h3 {
        font-size: 14px;
    }

    .fi-culture-card {
        padding: 28px 22px;
    }

    .fi-culture-content h2 {
        font-size: 35px;
    }

    .fi-culture-points {
        grid-template-columns: 1fr;
    }

    .fi-career-apply-inner {
        width: 94%;

        padding: 28px 22px;
    }

    .fi-career-apply-inner h2 {
        font-size: 26px;
    }

}


/* 
============================================================================ */


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

.fi-about-modern {

    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background:

        radial-gradient(
            circle at 10% 20%,
            rgba(0, 172, 225, .13),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(0, 120, 190, .08),
            transparent 30%
        ),

        #eef8fc;
}


/* DOT BACKGROUND */

.fi-about-modern::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        radial-gradient(
            rgba(0, 130, 180, .15) 1px,
            transparent 1px
        );

    background-size: 26px 26px;

    opacity: .35;

}


/* =====================================================
   CONTAINER
===================================================== */

.fi-about-container {

    position: relative;

    z-index: 2;

    width: 92%;

    max-width: 1380px;

    margin: auto;

    display: grid;

    grid-template-columns: 48% 52%;

    align-items: center;

    gap: 70px;

}


/* =====================================================
   LEFT VISUAL
===================================================== */

.fi-about-visual {

    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* GLOW */

.fi-about-visual::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(0, 174, 230, .20),
            transparent 68%
        );

}


/* GRID */

.fi-about-grid {

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background-image:

        linear-gradient(
            rgba(0, 130, 180, .07) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0, 130, 180, .07) 1px,
            transparent 1px
        );

    background-size: 30px 30px;

    mask-image: radial-gradient(
        circle,
        black 25%,
        transparent 72%
    );

}


/* ORBIT */

.fi-about-orbit {

    position: absolute;

    width: 430px;

    height: 430px;

    border: 1px dashed rgba(0, 145, 195, .20);

    border-radius: 50%;

    transform: rotate(-15deg);

}


.fi-about-orbit::before {

    content: "";

    position: absolute;

    width: 12px;

    height: 12px;

    top: 65px;

    right: 55px;

    border-radius: 50%;

    background: #08a9dc;

    box-shadow:

        0 0 0 7px rgba(8, 169, 220, .10),

        0 0 20px rgba(8, 169, 220, .5);

}


/* =====================================================
   MAIN CARD
===================================================== */

.fi-about-card {

    position: relative;

    z-index: 3;

    width: 430px;

    max-width: 90%;

    overflow: hidden;

    border-radius: 24px;

    background:

        linear-gradient(
            145deg,
            #123f53,
            #082633
        );

    border: 1px solid
        rgba(90, 211, 237, .16);

    box-shadow:

        0 35px 75px
        rgba(20, 75, 100, .28);

    transform: rotate(-3deg);

}


/* CARD TOP */

.fi-about-card-top {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 17px 19px;

    color: #65d2ed;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

}


.fi-about-live {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #12d59b;

    box-shadow:

        0 0 0 5px
        rgba(18,213,155,.10);

}


/* =====================================================
   CENTER
===================================================== */

.fi-about-center {

    min-height: 285px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:

        radial-gradient(
            circle at center,
            rgba(28, 145, 178, .22),
            transparent 45%
        );

}


.fi-about-logo {

    width: 90px;

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    border-radius: 25px;

    color: #fff;

    background:

        linear-gradient(
            135deg,
            #078cc8,
            #12bce1
        );

    box-shadow:

        0 20px 40px
        rgba(0, 160, 215, .25);

    font-size: 27px;

    font-weight: 900;

}


.fi-about-center strong {

    color: #fff;

    font-size: 20px;

}


.fi-about-center small {

    margin-top: 7px;

    color: rgba(220,240,245,.52);

    font-size: 8px;

    letter-spacing: .8px;

}


/* =====================================================
   CARD BOTTOM
===================================================== */

.fi-about-card-bottom {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    border-top:
        1px solid rgba(255,255,255,.07);

}


.fi-about-card-bottom div {

    padding: 15px;

    text-align: center;

    border-right:
        1px solid rgba(255,255,255,.07);

}


.fi-about-card-bottom div:last-child {

    border-right: 0;

}


.fi-about-card-bottom strong {

    display: block;

    color: #58cfee;

    font-size: 15px;

}


.fi-about-card-bottom span {

    display: block;

    margin-top: 4px;

    color: rgba(255,255,255,.40);

    font-size: 7px;

}


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

.fi-about-floating {

    position: absolute;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px 14px;

    border-radius: 12px;

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

    box-shadow:

        0 20px 45px
        rgba(20,80,110,.18);

}


.fi-about-floating > div {

    width: 33px;

    height: 33px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    color: #078dc8;

    background: #e5f7fc;

    font-size: 12px;

    font-weight: 800;

}


.fi-about-floating small {

    display: block;

    color: #91a3aa;

    font-size: 6px;

    font-weight: 800;

}


.fi-about-floating strong {

    display: block;

    margin-top: 3px;

    color: #315767;

    font-size: 9px;

}


.fi-about-floating-one {

    left: -15px;

    top: 70px;

}


.fi-about-floating-two {

    right: -10px;

    bottom: 70px;

}


/* =====================================================
   RIGHT CONTENT
===================================================== */

.fi-about-content {

    max-width: 700px;

}


/* LABEL */

.fi-about-label {

    width: fit-content;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 9px 15px;

    border-radius: 50px;

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

    border: 1px solid rgba(0,120,180,.13);

    color: #087fb9;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.2px;

}


.fi-about-label span {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #08a8da;

    box-shadow:

        0 0 0 5px
        rgba(8,168,218,.11);

}


/* =====================================================
   HEADING
===================================================== */

.fi-about-content h2 {

    margin: 27px 0 20px;

    color: #123d50;

    font-size: clamp(43px, 4.5vw, 65px);

    line-height: 1.03;

    letter-spacing: -2.8px;

    font-weight: 800;

}


.fi-about-content h2 span {

    display: block;

    color: #078dc8;

}


/* =====================================================
   PARAGRAPHS
===================================================== */

.fi-about-intro {

    font-size: 16px !important;

    color: #496d7d !important;

}


.fi-about-content > p {

    max-width: 650px;

    color: #7a909a;

    font-size: 13px;

    line-height: 1.85;

}


/* =====================================================
   HIGHLIGHTS
===================================================== */

.fi-about-highlights {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 10px;

    margin-top: 30px;

}


.fi-about-highlights > div {

    padding: 16px;

    border-radius: 13px;

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

    border: 1px solid #e0edf1;

    transition: .3s ease;

}


.fi-about-highlights > div:hover {

    transform: translateY(-4px);

    background: #fff;

    box-shadow:

        0 15px 35px
        rgba(20,90,115,.08);

}


.fi-about-highlights span {

    display: block;

    color: #078dc8;

    font-size: 7px;

    font-weight: 800;

}


.fi-about-highlights strong {

    display: block;

    margin-top: 8px;

    color: #355c6c;

    font-size: 10px;

}


.fi-about-highlights small {

    display: block;

    margin-top: 5px;

    color: #8a9da5;

    font-size: 7px;

    line-height: 1.5;

}


/* =====================================================
   ACTIONS
===================================================== */

.fi-about-actions {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-top: 30px;

}


.fi-about-primary {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 14px 19px;

    border-radius: 10px;

    color: #fff;

    background:

        linear-gradient(
            135deg,
            #0781c1,
            #08b5df
        );

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    box-shadow:

        0 15px 30px
        rgba(0,145,205,.20);

}


.fi-about-primary:hover {

    color: #fff;

    transform: translateY(-3px);

}


.fi-about-primary span {

    font-size: 15px;

}


.fi-about-secondary {

    color: #466a7a;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

}


.fi-about-secondary:hover {

    color: #078dc8;

}


.fi-about-secondary span {

    margin-left: 5px;

    color: #078dc8;

}


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

@media (max-width: 1100px) {

    .fi-about-container {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .fi-about-content {

        max-width: 800px;

    }

    .fi-about-visual {

        max-width: 600px;

        width: 100%;

        margin: auto;

    }

}


@media (max-width: 700px) {

    .fi-about-modern {

        padding: 65px 0;

    }

    .fi-about-container {

        width: 94%;

    }

    .fi-about-content h2 {

        font-size: 43px;

        letter-spacing: -1.5px;

    }

    .fi-about-highlights {

        grid-template-columns: 1fr;

    }

    .fi-about-actions {

        flex-wrap: wrap;

    }

    .fi-about-visual {

        min-height: 460px;

    }

    .fi-about-card {

        width: 100%;

    }

    .fi-about-orbit,
    .fi-about-grid {

        display: none;

    }

    .fi-about-floating-one {

        left: -5px;

        top: 30px;

    }

    .fi-about-floating-two {

        right: -5px;

        bottom: 30px;

    }

}


@media (max-width: 480px) {

    .fi-about-content h2 {

        font-size: 36px;

    }

    .fi-about-center {

        min-height: 240px;

    }

    .fi-about-logo {

        width: 75px;

        height: 75px;

    }

    .fi-about-floating {

        transform: scale(.8);

    }

    .fi-about-floating-one {

        transform-origin: left top;

    }

    .fi-about-floating-two {

        transform-origin: right bottom;

    }

}




/* =========================================================
   FUTURE INFOSYS
   HORIZONTAL PREMIUM TECH SERVICES
========================================================= */

.fi-services-modern {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(0, 174, 239, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 95% 90%,
            rgba(0, 105, 180, .08),
            transparent 30%
        ),
        #f5faff;
}


/* BACKGROUND DOTS */

.fi-services-modern::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(
            rgba(0, 130, 190, .13) 1px,
            transparent 1px
        );

    background-size: 25px 25px;
    opacity: .35;
    pointer-events: none;
}


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

.fi-services-header {
    position: relative;
    z-index: 2;

    max-width: 720px;
    margin: 0 auto 48px;

    text-align: center;
}

.fi-services-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 16px;

    border-radius: 50px;

    background: #ffffff;
    border: 1px solid #dceef6;

    color: #008bc1;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;

    box-shadow: 0 8px 20px rgba(0, 110, 160, .06);
}

.fi-services-badge i {
    font-size: 11px;
}

.fi-services-header h2 {
    margin: 17px 0 12px;

    color: #12384c;

    font-size: 42px;
    line-height: 1.15;
    font-weight: 800;

    letter-spacing: -1px;
}

.fi-services-header p {
    margin: 0 auto;

    max-width: 620px;

    color: #728795;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   SERVICES LIST
========================================================= */

.fi-services-list {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 15px;
}


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

.fi-tech-card {
    position: relative;

    min-height: 105px;

    display: flex;
    align-items: center;

    padding: 15px 22px 15px 15px;

    overflow: hidden;

    border: 1px solid #e0edf3;
    border-radius: 18px;

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

    box-shadow:
        0 8px 25px rgba(29, 83, 108, .055);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


/* LEFT BLUE LINE */

.fi-tech-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 0;

    background: linear-gradient(
        to bottom,
        #00a9df,
        #0067b1
    );

    border-radius: 0 5px 5px 0;

    transition: height .35s ease;
}


/* GLOW CIRCLE */

.fi-tech-card::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -80px;
    top: -75px;

    border-radius: 50%;

    background: rgba(0, 174, 239, .055);

    transition: .4s ease;

    pointer-events: none;
}


/* HOVER */

.fi-tech-card:hover {
    transform: translateX(6px);

    border-color: #b9e7f5;

    box-shadow:
        0 18px 40px rgba(18, 104, 140, .12),
        0 0 25px rgba(0, 174, 239, .05);
}

.fi-tech-card:hover::before {
    height: 100%;
}

.fi-tech-card:hover::after {
    transform: scale(1.7);
}


/* =========================================================
   NUMBER
========================================================= */

.fi-tech-number {
    flex: 0 0 auto;

    width: 52px;
    height: 52px;

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

    margin-right: 15px;

    border-radius: 14px;

    background: #f4faff;

    border: 1px solid #e1f0f6;

    color: #0879bc;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .5px;

    box-shadow:
        0 8px 18px rgba(0, 100, 150, .06);

    transition: .35s ease;

    z-index: 2;
}

.fi-tech-card:hover .fi-tech-number {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #08a8df,
        #006bb4
    );

    border-color: transparent;

    box-shadow:
        0 10px 22px rgba(0, 139, 193, .22);
}


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

.fi-tech-icon {
    flex: 0 0 auto;

    width: 50px;
    height: 50px;

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

    margin-right: 17px;

    border-radius: 14px;

    color: #008bc1;

    background:
        linear-gradient(
            145deg,
            #effaff,
            #e3f6fc
        );

    border: 1px solid #d7eff8;

    font-size: 18px;

    transition: .35s ease;

    z-index: 2;
}

.fi-tech-card:hover .fi-tech-icon {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #08a8df,
        #0070b9
    );

    border-color: transparent;

    transform: rotate(-4deg);

    box-shadow:
        0 10px 25px rgba(0, 145, 205, .20);
}


/* =========================================================
   CONTENT
========================================================= */

.fi-tech-content {
    position: relative;
    z-index: 2;

    min-width: 0;

    flex: 1;
}

.fi-tech-content small {
    display: block;

    margin-bottom: 4px;

    color: #8aa4b1;

    font-size: 9px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.2px;
}

.fi-tech-content h3 {
    margin: 0;

    color: #183d50;

    font-size: 13px;
    line-height: 1.45;

    font-weight: 800;

    letter-spacing: .15px;
}


/* =========================================================
   ARROW
========================================================= */

.fi-tech-arrow {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

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

    margin-left: 12px;

    border-radius: 50%;

    color: #9ab3bf;

    background: #f5fafc;

    font-size: 15px;

    transition: .35s ease;

    z-index: 2;
}

.fi-tech-card:hover .fi-tech-arrow {
    color: #ffffff;

    background: #08a8df;

    transform: translate(3px, -3px);
}


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

@media (max-width: 991px) {

    .fi-services-modern {
        padding: 70px 0;
    }

    .fi-services-header h2 {
        font-size: 36px;
    }

    .fi-services-list {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 575px) {

    .fi-services-modern {
        padding: 50px 0;
    }

    .fi-services-header {
        margin-bottom: 32px;
    }

    .fi-services-header h2 {
        font-size: 29px;
    }

    .fi-services-header p {
        font-size: 13px;
    }

    .fi-services-badge {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .fi-tech-card {
        min-height: 92px;
        padding: 12px;
        border-radius: 15px;
    }

    .fi-tech-number {
        width: 43px;
        height: 43px;
        margin-right: 10px;
        border-radius: 12px;
        font-size: 11px;
    }

    .fi-tech-icon {
        width: 43px;
        height: 43px;
        margin-right: 11px;
        border-radius: 12px;
        font-size: 15px;
    }

    .fi-tech-content small {
        font-size: 7px;
        letter-spacing: .8px;
    }

    .fi-tech-content h3 {
        font-size: 11px;
        line-height: 1.4;
    }

    .fi-tech-arrow {
        width: 28px;
        height: 28px;
        margin-left: 7px;
        font-size: 12px;
    }
}




/* =========================================================
   FUTURE INFOSYS TECHNOLOGY
   PREMIUM ABOUT SECTION
========================================================= */

.fi-about-premium {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: #f7fbfd;
}


/* =========================================================
   CONTAINER
========================================================= */

.fi-about-premium-container {
    width: min(1200px, calc(100% - 40px));
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 75px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.fi-about-premium-left {
    position: relative;
    z-index: 3;
}


/* EYEBROW */

.fi-about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 22px;

    color: #078abd;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.7px;
}

.fi-about-eyebrow span {
    width: 30px;
    height: 2px;

    background: #08a8df;

    border-radius: 5px;
}


/* HEADING */

.fi-about-premium-left h2 {
    max-width: 600px;

    margin: 0 0 25px;

    color: #102f42;

    font-size: clamp(42px, 4.5vw, 62px);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -2.5px;
}

.fi-about-premium-left h2 strong {
    display: block;

    color: #078fc5;

    font-weight: 700;
}


/* TEXT */

.fi-about-lead {
    max-width: 580px;

    margin: 0 0 15px;

    color: #456474;

    font-size: 17px;

    line-height: 1.8;

    font-weight: 500;
}

.fi-about-description {
    max-width: 590px;

    margin: 0 0 32px;

    color: #7b909c;

    font-size: 14px;

    line-height: 1.9;
}


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

.fi-about-features {
    display: flex;

    flex-direction: column;

    gap: 12px;

    max-width: 590px;

    margin-bottom: 35px;
}


.fi-about-feature {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 13px 16px;

    border-radius: 14px;

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

    border: 1px solid #e4eef3;

    transition: .3s ease;
}

.fi-about-feature:hover {
    transform: translateX(6px);

    background: #ffffff;

    border-color: #c7e9f5;

    box-shadow:
        0 12px 30px rgba(23, 95, 125, .08);
}


.fi-about-feature-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;

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

    border-radius: 11px;

    color: #008fc6;

    background: #eaf8fd;

    font-size: 15px;

    transition: .3s ease;
}

.fi-about-feature:hover .fi-about-feature-icon {
    color: #ffffff;

    background: #08a8df;

    transform: scale(1.05);
}


.fi-about-feature strong {
    display: block;

    margin-bottom: 2px;

    color: #183c4f;

    font-size: 13px;

    font-weight: 800;
}

.fi-about-feature span {
    display: block;

    color: #8298a4;

    font-size: 11px;
}


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

.fi-about-premium-actions {
    display: flex;

    align-items: center;

    gap: 25px;
}


.fi-about-main-btn {
    display: inline-flex;

    align-items: center;
    gap: 18px;

    padding: 14px 18px 14px 22px;

    border-radius: 50px;

    color: #ffffff !important;

    background: #123e53;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none !important;

    box-shadow:
        0 12px 25px rgba(18, 62, 83, .16);

    transition: .3s ease;
}

.fi-about-main-btn span {
    width: 32px;
    height: 32px;

    display: flex;

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

    border-radius: 50%;

    background: #08a8df;

    font-size: 14px;

    transition: .3s ease;
}

.fi-about-main-btn:hover {
    transform: translateY(-3px);

    background: #0b536e;
}

.fi-about-main-btn:hover span {
    transform: rotate(45deg);
}


.fi-about-text-btn {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #167ca5 !important;

    font-size: 12px;

    font-weight: 800;

    text-decoration: none !important;
}

.fi-about-text-btn span {
    font-size: 17px;

    transition: .3s ease;
}

.fi-about-text-btn:hover span {
    transform: translateX(5px);
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.fi-about-premium-right {
    position: relative;

    min-height: 570px;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* BLUE GLOW */

.fi-about-glow {
    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,174,239,.16) 0%,
            rgba(0,174,239,.06) 42%,
            transparent 70%
        );

    filter: blur(2px);
}


/* GRID */

.fi-about-grid-pattern {
    position: absolute;

    inset: 30px;

    background-image:
        linear-gradient(
            rgba(0,126,177,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,126,177,.06) 1px,
            transparent 1px
        );

    background-size: 32px 32px;

    border-radius: 35px;

    mask-image: radial-gradient(
        circle,
        black 35%,
        transparent 75%
    );
}


/* =========================================================
   MAIN TECH PANEL
========================================================= */

.fi-about-tech-panel {
    position: relative;

    width: 440px;
    min-height: 450px;

    overflow: hidden;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f2faff 100%
        );

    border: 1px solid #dceef5;

    box-shadow:
        0 35px 80px rgba(24, 89, 116, .14),
        0 5px 20px rgba(0, 120, 170, .05);

    z-index: 2;
}


/* PANEL TOP */

.fi-about-panel-header {
    height: 80px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 0 25px;

    border-bottom: 1px solid #e8f1f5;
}


.fi-about-brand {
    display: flex;

    align-items: center;

    gap: 11px;
}

.fi-about-brand > span {
    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 11px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #08a8df,
        #0069b3
    );

    font-size: 12px;

    font-weight: 900;

    box-shadow:
        0 8px 18px rgba(0,143,198,.22);
}

.fi-about-brand strong {
    display: block;

    color: #173c50;

    font-size: 12px;

    font-weight: 800;
}

.fi-about-brand small {
    display: block;

    margin-top: 2px;

    color: #91a6b0;

    font-size: 9px;
}


/* STATUS */

.fi-about-status {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #6c909f;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}

.fi-about-status i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #20c58a;

    box-shadow:
        0 0 0 4px rgba(32,197,138,.10);
}


/* =========================================================
   PANEL BODY
========================================================= */

.fi-about-panel-body {
    position: relative;

    min-height: 285px;

    display: flex;

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

    flex-direction: column;
}


/* CIRCLE */

.fi-about-circle {
    position: relative;

    width: 180px;
    height: 180px;

    display: flex;

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

    border-radius: 50%;

    border: 1px solid rgba(0,158,216,.22);

    box-shadow:
        0 0 0 18px rgba(0,158,216,.025),
        0 0 0 38px rgba(0,158,216,.018);
}


/* INNER */

.fi-about-circle-inner {
    width: 108px;
    height: 108px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #0caadd,
            #0068b2
        );

    box-shadow:
        0 20px 40px rgba(0,120,180,.25),
        inset 0 1px 1px rgba(255,255,255,.45);

    color: #ffffff;

    font-size: 30px;

    font-weight: 900;
}

.fi-about-circle-inner::after {
    content: "";

    position: absolute;

    width: 125px;
    height: 125px;

    border-radius: 50%;

    border: 1px dashed rgba(0,150,210,.25);
}


/* ORBIT DOTS */

.fi-orbit-dot {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #08a8df;

    box-shadow:
        0 0 0 5px rgba(8,168,223,.10);
}

.fi-orbit-one {
    top: 8px;
    right: 35px;
}

.fi-orbit-two {
    left: 8px;
    bottom: 38px;
}

.fi-orbit-three {
    right: 25px;
    bottom: 18px;
}


/* PANEL TITLE */

.fi-about-panel-title {
    text-align: center;

    margin-top: 30px;
}

.fi-about-panel-title small {
    color: #7fa1b0;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.fi-about-panel-title h3 {
    margin: 5px 0 0;

    color: #153b4e;

    font-size: 20px;

    line-height: 1.25;

    font-weight: 800;
}

.fi-about-panel-title h3 span {
    color: #0797cf;
}


/* =========================================================
   STATS
========================================================= */

.fi-about-panel-stats {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    border-top: 1px solid #e7f0f4;
}


.fi-about-panel-stats div {
    padding: 19px 10px;

    text-align: center;

    border-right: 1px solid #e7f0f4;
}

.fi-about-panel-stats div:last-child {
    border-right: 0;
}

.fi-about-panel-stats strong {
    display: block;

    margin-bottom: 4px;

    color: #078fc5;

    font-size: 15px;

    font-weight: 900;
}

.fi-about-panel-stats span {
    color: #8099a5;

    font-size: 9px;

    font-weight: 700;
}


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

.fi-about-float {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 13px 17px;

    border-radius: 14px;

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

    border: 1px solid #e0edf3;

    box-shadow:
        0 18px 40px rgba(26, 83, 106, .13);

    z-index: 5;

    animation: fiAboutFloat 4s ease-in-out infinite;
}

.fi-about-float-one {
    left: -25px;
    top: 105px;
}

.fi-about-float-two {
    right: -20px;
    bottom: 105px;

    animation-delay: 1.5s;
}


.fi-float-icon {
    width: 34px;
    height: 34px;

    display: flex;

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

    border-radius: 10px;

    color: #ffffff;

    background: #08a8df;

    font-size: 12px;
}


.fi-about-float small {
    display: block;

    color: #8ca2ad;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;
}

.fi-about-float strong {
    display: block;

    margin-top: 3px;

    color: #173c4f;

    font-size: 11px;

    font-weight: 800;
}


/* FLOAT ANIMATION */

@keyframes fiAboutFloat {

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

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


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

@media (max-width: 1100px) {

    .fi-about-premium-container {
        gap: 45px;
    }

    .fi-about-premium-left h2 {
        font-size: 46px;
    }

    .fi-about-tech-panel {
        width: 390px;
    }

    .fi-about-float-one {
        left: -10px;
    }

    .fi-about-float-two {
        right: -10px;
    }
}


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

@media (max-width: 991px) {

    .fi-about-premium {
        padding: 75px 0;
    }

    .fi-about-premium-container {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .fi-about-premium-left {
        max-width: 700px;
        margin: auto;

        text-align: center;
    }

    .fi-about-eyebrow {
        justify-content: center;
    }

    .fi-about-premium-left h2 {
        margin-left: auto;
        margin-right: auto;

        font-size: 45px;
    }

    .fi-about-lead,
    .fi-about-description {
        margin-left: auto;
        margin-right: auto;
    }

    .fi-about-features {
        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }

    .fi-about-premium-actions {
        justify-content: center;
    }

    .fi-about-premium-right {
        min-height: 530px;
    }
}


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

@media (max-width: 575px) {

    .fi-about-premium {
        padding: 55px 0;
    }

    .fi-about-premium-container {
        width: calc(100% - 30px);

        gap: 45px;
    }

    .fi-about-premium-left h2 {
        font-size: 34px;

        letter-spacing: -1.5px;
    }

    .fi-about-lead {
        font-size: 15px;
    }

    .fi-about-description {
        font-size: 13px;
    }

    .fi-about-feature {
        padding: 11px;
    }

    .fi-about-feature-icon {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

    .fi-about-feature strong {
        font-size: 12px;
    }

    .fi-about-feature span {
        font-size: 10px;
    }

    .fi-about-premium-actions {
        flex-direction: column;

        gap: 18px;
    }

    .fi-about-premium-right {
        min-height: 440px;
    }

    .fi-about-tech-panel {
        width: 100%;

        min-height: 390px;

        border-radius: 22px;
    }

    .fi-about-panel-header {
        height: 65px;

        padding: 0 17px;
    }

    .fi-about-panel-body {
        min-height: 240px;
    }

    .fi-about-circle {
        width: 145px;
        height: 145px;
    }

    .fi-about-circle-inner {
        width: 88px;
        height: 88px;

        font-size: 24px;
    }

    .fi-about-panel-title {
        margin-top: 22px;
    }

    .fi-about-panel-title h3 {
        font-size: 17px;
    }

    .fi-about-float {
        padding: 9px 12px;

        gap: 8px;
    }

    .fi-about-float-one {
        left: -5px;
        top: 70px;
    }

    .fi-about-float-two {
        right: -5px;
        bottom: 55px;
    }

    .fi-float-icon {
        width: 29px;
        height: 29px;
    }

    .fi-about-float strong {
        font-size: 9px;
    }
}


/* 
=============================================contact us ============================= */



/* =========================================================
   CONTACT SECTION ONLY
   Footer par koi effect nahi hoga
========================================================= */

.fi-contact-section {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background: #f5faff;
}


/* Background */

.fi-contact-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: radial-gradient(
        rgba(0, 130, 190, .12) 1px,
        transparent 1px
    );

    background-size: 24px 24px;
    opacity: .35;

    pointer-events: none;
}


/* =========================================================
   ONLY CONTACT HEADING
========================================================= */

.fi-contact-section .fi-contact-heading {
    position: relative;
    z-index: 2;

    max-width: 720px;
    margin: 0 auto 50px;

    text-align: center;
}

.fi-contact-section .fi-contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 15px;

    color: #078fc5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
}

.fi-contact-section .fi-contact-eyebrow span {
    width: 28px;
    height: 2px;

    background: #08a8df;
    border-radius: 10px;
}

.fi-contact-section .fi-contact-heading h2 {
    margin: 0 0 14px;

    color: #12384c;

    font-size: 52px;
    line-height: 1.08;
    font-weight: 800;

    letter-spacing: -2px;
}

.fi-contact-section .fi-contact-heading h2 strong {
    color: #0798d0;
}

.fi-contact-section .fi-contact-heading p {
    max-width: 620px;
    margin: auto;

    color: #748b98;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   CONTACT LAYOUT ONLY
========================================================= */

.fi-contact-section .fi-contact-layout {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.1fr .9fr;

    gap: 25px;

    align-items: start;
}


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

.fi-contact-section .fi-contact-form-card {
    position: relative;

    padding: 35px;

    background: #ffffff;

    border: 1px solid #e0edf3;
    border-radius: 24px;

    box-shadow:
        0 25px 60px rgba(25, 82, 106, .08);
}


/* FORM HEADER */

.fi-contact-section .fi-form-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 28px;
    padding-bottom: 22px;

    border-bottom: 1px solid #edf3f6;
}

.fi-contact-section .fi-form-top small {
    display: block;

    margin-bottom: 5px;

    color: #0798cf;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.fi-contact-section .fi-form-top h3 {
    margin: 0;

    color: #183d50;

    font-size: 20px;
    font-weight: 800;
}

.fi-contact-section .fi-form-icon {
    width: 48px;
    height: 48px;

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

    border-radius: 14px;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #08a9df,
        #006bb3
    );

    box-shadow:
        0 10px 25px rgba(0, 145, 205, .20);
}


/* =========================================================
   INPUTS ONLY
========================================================= */

.fi-contact-section .fi-form-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px 15px;
}

.fi-contact-section .fi-input-group label {
    display: block;

    margin: 0 0 7px 3px;

    color: #78919d;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;
}

.fi-contact-section .fi-input-box {
    position: relative;
}

.fi-contact-section .fi-input-box > i {
    position: absolute;

    left: 15px;
    top: 50%;

    transform: translateY(-50%);

    color: #8ba9b6;

    font-size: 12px;

    z-index: 2;

    transition: .3s ease;
}


/* INPUT - IMPORTANT:
   Only inputs inside contact section */

.fi-contact-section .fi-input-box input,
.fi-contact-section .fi-input-box textarea {
    width: 100%;

    outline: none;

    border: 1px solid #e0edf2;

    border-radius: 12px;

    background: #f8fbfc;

    color: #183d50;

    font-size: 12px;

    box-sizing: border-box;

    transition: .3s ease;
}

.fi-contact-section .fi-input-box input {
    height: 48px;

    padding: 0 15px 0 42px;
}

.fi-contact-section .fi-input-box textarea {
    min-height: 115px;

    padding: 14px 15px 14px 42px;

    resize: vertical;
}

.fi-contact-section .fi-input-box input:focus,
.fi-contact-section .fi-input-box textarea:focus {
    background: #ffffff;

    border-color: #35b9e5;

    box-shadow:
        0 0 0 4px rgba(8, 168, 223, .08);
}

.fi-contact-section .fi-input-box:focus-within > i {
    color: #08a8df;
}

.fi-contact-section .fi-input-box input::placeholder,
.fi-contact-section .fi-input-box textarea::placeholder {
    color: #a4b7bf;
}


/* MESSAGE */

.fi-contact-section .fi-message-group {
    grid-column: 1 / -1;
}


/* =========================================================
   BUTTONS ONLY
========================================================= */

.fi-contact-section .fi-form-actions {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 24px;
}

.fi-contact-section .fi-send-btn {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    height: 48px;

    padding: 5px 7px 5px 21px;

    border: 0;
    border-radius: 50px;

    color: #ffffff;

    background: #123e53;

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition: .3s ease;
}

.fi-contact-section .fi-send-btn span {
    width: 36px;
    height: 36px;

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

    border-radius: 50%;

    background: #08a8df;
}

.fi-contact-section .fi-send-btn:hover {
    background: #0a5874;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(18, 62, 83, .18);
}

.fi-contact-section .fi-cancel-btn {
    height: 48px;

    padding: 0 20px;

    border: 1px solid #dce8ed;
    border-radius: 50px;

    color: #78909c;

    background: #ffffff;

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

    cursor: pointer;

    transition: .3s ease;
}

.fi-contact-section .fi-cancel-btn:hover {
    color: #ffffff;

    background: #718894;

    border-color: #718894;
}


/* =========================================================
   RIGHT CONTACT INFORMATION
========================================================= */

.fi-contact-section .fi-contact-info {
    display: flex;
    flex-direction: column;

    gap: 16px;
}


/* INFO CARD */

.fi-contact-section .fi-info-card {
    padding: 24px;

    border: 1px solid #e0edf2;
    border-radius: 20px;

    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(28, 82, 104, .06);

    transition: .3s ease;
}

.fi-contact-section .fi-info-card:hover {
    transform: translateY(-4px);

    border-color: #bfe5f2;

    box-shadow:
        0 20px 45px rgba(28, 82, 104, .10);
}


/* INFO HEADER */

.fi-contact-section .fi-info-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    padding-bottom: 18px;
    margin-bottom: 18px;

    border-bottom: 1px solid #edf3f6;
}

.fi-contact-section .fi-info-main-icon {
    width: 44px;
    height: 44px;

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

    border-radius: 13px;

    color: #078fc5;

    background: #eaf8fd;

    font-size: 15px;
}

.fi-contact-section .fi-info-heading small {
    display: block;

    color: #8ca3ae;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.2px;
}

.fi-contact-section .fi-info-heading h3 {
    margin: 3px 0 0;

    color: #173c4f;

    font-size: 16px;
    font-weight: 800;
}


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

.fi-contact-section .fi-person-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;
}

.fi-contact-section .fi-person {
    display: flex;

    gap: 10px;

    padding: 12px;

    border-radius: 12px;

    background: #f7fbfc;

    border: 1px solid #edf3f6;

    transition: .3s ease;
}

.fi-contact-section .fi-person:hover {
    background: #ffffff;

    border-color: #c6e8f3;
}

.fi-contact-section .fi-person-icon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

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

    border-radius: 9px;

    color: #078fc5;

    background: #e8f7fc;

    font-size: 10px;
}

.fi-contact-section .fi-person strong {
    display: block;

    margin-bottom: 6px;

    color: #254657;

    font-size: 11px;
}

.fi-contact-section .fi-person a {
    display: block;

    margin-top: 4px;

    color: #7a929e !important;

    font-size: 9px;

    text-decoration: none !important;
}

.fi-contact-section .fi-person a i {
    width: 14px;

    color: #08a3d8;

    font-size: 8px;
}


/* =========================================================
   LOCATION
========================================================= */

.fi-contact-section .fi-location-card {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 23px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #103e54,
            #082c40
        );

    box-shadow:
        0 20px 45px rgba(8, 44, 64, .14);
}

.fi-contact-section .fi-location-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 13px;

    color: #ffffff;

    background: rgba(8,168,223,.18);

    border: 1px solid rgba(255,255,255,.12);
}

.fi-contact-section .fi-location-card small {
    display: block;

    color: #58c9ed;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.2px;
}

.fi-contact-section .fi-location-card h3 {
    margin: 3px 0 7px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 800;
}

.fi-contact-section .fi-location-card p {
    margin: 0;

    color: #aac3cf;

    font-size: 10px;

    line-height: 1.7;
}


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

@media (max-width: 991px) {

    .fi-contact-section .fi-contact-layout {
        grid-template-columns: 1fr;
    }

    .fi-contact-section .fi-contact-form-card,
    .fi-contact-section .fi-contact-info {
        max-width: 800px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}


@media (max-width: 575px) {

    .fi-contact-section {
        padding: 60px 0;
    }

    .fi-contact-section .fi-contact-heading h2 {
        font-size: 36px;
    }

    .fi-contact-section .fi-contact-form-card {
        padding: 22px 16px;
    }

    .fi-contact-section .fi-form-grid {
        grid-template-columns: 1fr;
    }

    .fi-contact-section .fi-message-group {
        grid-column: auto;
    }

    .fi-contact-section .fi-person-grid {
        grid-template-columns: 1fr;
    }

    .fi-contact-section .fi-form-actions {
        flex-wrap: wrap;
    }

    .fi-contact-section .fi-send-btn {
        flex: 1;
    }
}






/* =========================================================
   FITX9 PREMIUM ABOUT
   COMPLETELY ISOLATED DESIGN
========================================================= */

section.fitx9-about {
    all: initial !important;

    display: block !important;

    position: relative !important;

    width: 100% !important;

    min-width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 90px 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    background: #f5fafc !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;
}


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

section.fitx9-about::before {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background-image:
        radial-gradient(
            rgba(0,145,205,.10) 1px,
            transparent 1px
        ) !important;

    background-size: 23px 23px !important;

    opacity: .45 !important;

    pointer-events: none !important;
}


section.fitx9-about::after {
    content: "" !important;

    position: absolute !important;

    width: 550px !important;
    height: 550px !important;

    right: -300px !important;
    top: -300px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(0,174,239,.12),
            transparent 68%
        ) !important;

    pointer-events: none !important;
}


/* =========================================================
   INNER
========================================================= */

section.fitx9-about .fitx9-about-inner {
    all: initial !important;

    position: relative !important;

    z-index: 5 !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 45%)
        minmax(0, 55%) !important;

    align-items: center !important;

    gap: 65px !important;

    width: min(1180px, calc(100% - 40px)) !important;

    max-width: 1180px !important;

    margin: 0 auto !important;

    box-sizing: border-box !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;
}


/* =========================================================
   LEFT IMAGE
========================================================= */

section.fitx9-about .fitx9-about-left {
    all: initial !important;

    position: relative !important;

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    min-height: 520px !important;

    box-sizing: border-box !important;
}


section.fitx9-about .fitx9-about-image {
    all: initial !important;

    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    overflow: hidden !important;

    border-radius: 28px !important;

    background: #dceff6 !important;

    box-shadow:
        0 30px 70px rgba(17,74,98,.15) !important;

    box-sizing: border-box !important;
}


section.fitx9-about .fitx9-about-image img {
    all: initial !important;

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;

    box-sizing: border-box !important;

    transition: transform .6s ease !important;
}


section.fitx9-about .fitx9-about-left:hover
.fitx9-about-image img {
    transform: scale(1.04) !important;
}


/* IMAGE SHADE */

section.fitx9-about .fitx9-about-image-shade {
    all: initial !important;

    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(5,35,50,.82)
        ) !important;

    pointer-events: none !important;
}


/* =========================================================
   EXPERIENCE
========================================================= */

section.fitx9-about .fitx9-about-experience {
    all: initial !important;

    position: absolute !important;

    left: 25px !important;
    bottom: 25px !important;

    z-index: 5 !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 16px 20px !important;

    background: rgba(255,255,255,.96) !important;

    border-radius: 16px !important;

    box-shadow:
        0 18px 40px rgba(10,70,95,.18) !important;

    box-sizing: border-box !important;
}


section.fitx9-about .fitx9-about-experience strong {
    all: initial !important;

    color: #0798ce !important;

    font-size: 38px !important;

    line-height: 1 !important;

    font-weight: 900 !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


section.fitx9-about .fitx9-about-experience span {
    all: initial !important;

    color: #758c97 !important;

    font-size: 8px !important;

    line-height: 1.5 !important;

    font-weight: 800 !important;

    font-family: Arial, Helvetica, sans-serif !important;

    letter-spacing: .8px !important;
}


/* =========================================================
   TRUST CARD
========================================================= */

section.fitx9-about .fitx9-about-trusted {
    all: initial !important;

    position: absolute !important;

    top: 30px !important;
    right: -28px !important;

    z-index: 8 !important;

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    min-width: 215px !important;

    padding: 13px 16px !important;

    background: #ffffff !important;

    border: 1px solid #e2edf2 !important;

    border-radius: 15px !important;

    box-shadow:
        0 18px 40px rgba(18,77,100,.14) !important;

    box-sizing: border-box !important;

    animation: fitx9Float 4s ease-in-out infinite !important;
}


section.fitx9-about .fitx9-about-check {
    all: initial !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 36px !important;
    height: 36px !important;

    flex: 0 0 36px !important;

    border-radius: 10px !important;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #0bb0e4,
            #006db3
        ) !important;

    font-size: 13px !important;

    font-weight: 900 !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


section.fitx9-about .fitx9-about-trusted small {
    all: initial !important;

    display: block !important;

    color: #8aa1ac !important;

    font-size: 7px !important;

    font-weight: 800 !important;

    font-family: Arial, Helvetica, sans-serif !important;

    letter-spacing: 1px !important;
}


section.fitx9-about .fitx9-about-trusted strong {
    all: initial !important;

    display: block !important;

    margin-top: 3px !important;

    color: #173d50 !important;

    font-size: 11px !important;

    font-weight: 800 !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


/* =========================================================
   RIGHT
========================================================= */

section.fitx9-about .fitx9-about-right {
    all: initial !important;

    display: block !important;

    width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;
}


/* =========================================================
   LABEL
========================================================= */

section.fitx9-about .fitx9-about-tag {
    all: initial !important;

    display: flex !important;

    align-items: center !important;

    gap: 9px !important;

    margin-bottom: 17px !important;

    color: #078fc5 !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    font-family: Arial, Helvetica, sans-serif !important;

    letter-spacing: 1.7px !important;
}


section.fitx9-about .fitx9-about-tag span {
    all: initial !important;

    display: block !important;

    width: 30px !important;
    height: 2px !important;

    border-radius: 10px !important;

    background: #08a8df !important;
}


/* =========================================================
   HEADING
========================================================= */

section.fitx9-about .fitx9-about-right > h2 {
    all: initial !important;

    display: block !important;

    max-width: 650px !important;

    margin: 0 0 20px !important;

    color: #102f42 !important;

    font-size: 50px !important;

    line-height: 1.08 !important;

    font-weight: 800 !important;

    font-family: Arial, Helvetica, sans-serif !important;

    letter-spacing: -2px !important;
}


section.fitx9-about .fitx9-about-right > h2 strong {
    all: initial !important;

    display: block !important;

    margin-top: 5px !important;

    color: #078fc5 !important;

    font-size: 50px !important;

    line-height: 1.08 !important;

    font-weight: 800 !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

section.fitx9-about .fitx9-about-desc {
    all: initial !important;

    display: block !important;

    max-width: 630px !important;

    margin: 0 0 27px !important;

    color: #718995 !important;

    font-size: 14px !important;

    line-height: 1.85 !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


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

section.fitx9-about .fitx9-about-list {
    all: initial !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 10px !important;

    margin-bottom: 27px !important;
}


section.fitx9-about .fitx9-about-item {
    all: initial !important;

    position: relative !important;

    display: flex !important;

    align-items: flex-start !important;

    gap: 14px !important;

    width: 100% !important;

    padding: 15px 45px 15px 15px !important;

    background: #ffffff !important;

    border: 1px solid #e1edf2 !important;

    border-radius: 15px !important;

    box-sizing: border-box !important;

    transition: .3s ease !important;
}


section.fitx9-about .fitx9-about-item:hover {
    transform: translateX(5px) !important;

    border-color: #b9e3f0 !important;

    box-shadow:
        0 12px 30px rgba(22,84,108,.08) !important;
}


/* ICON */

section.fitx9-about .fitx9-about-icon {
    all: initial !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 42px !important;
    height: 42px !important;

    flex: 0 0 42px !important;

    border-radius: 11px !important;

    color: #078fc5 !important;

    background: #eaf8fd !important;

    border: 1px solid #d7eef6 !important;

    font-size: 14px !important;

    box-sizing: border-box !important;
}


/* CONTENT */

section.fitx9-about .fitx9-about-item-content {
    all: initial !important;

    display: block !important;

    min-width: 0 !important;

    flex: 1 1 auto !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


section.fitx9-about .fitx9-about-item-content h3 {
    all: initial !important;

    display: block !important;

    margin: 1px 0 5px !important;

    color: #193d50 !important;

    font-size: 13px !important;

    line-height: 1.4 !important;

    font-weight: 800 !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


section.fitx9-about .fitx9-about-item-content p {
    all: initial !important;

    display: block !important;

    margin: 0 !important;

    color: #8297a2 !important;

    font-size: 10px !important;

    line-height: 1.65 !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


/* NUMBER */

section.fitx9-about .fitx9-about-no {
    all: initial !important;

    position: absolute !important;

    right: 17px !important;

    top: 17px !important;

    color: #d2e5ec !important;

    font-size: 9px !important;

    font-weight: 900 !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


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

section.fitx9-about .fitx9-about-bottom {
    all: initial !important;

    display: flex !important;

    align-items: center !important;

    gap: 17px !important;

    width: 100% !important;

    padding: 16px 17px !important;

    border-radius: 16px !important;

    background: #eef8fc !important;

    border: 1px solid #dcebf1 !important;

    box-sizing: border-box !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


/* STAT */

section.fitx9-about .fitx9-about-stat {
    all: initial !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    flex: 0 0 auto !important;
}


section.fitx9-about .fitx9-about-stat strong {
    all: initial !important;

    color: #078fc5 !important;

    font-size: 30px !important;

    line-height: 1 !important;

    font-weight: 900 !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


section.fitx9-about .fitx9-about-stat span {
    all: initial !important;

    color: #8098a3 !important;

    font-size: 7px !important;

    line-height: 1.4 !important;

    font-weight: 800 !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


/* DIVIDER */

section.fitx9-about .fitx9-about-separator {
    all: initial !important;

    display: block !important;

    width: 1px !important;
    height: 40px !important;

    flex: 0 0 1px !important;

    background: #d4e5eb !important;
}


/* MESSAGE */

section.fitx9-about .fitx9-about-message {
    all: initial !important;

    display: block !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


section.fitx9-about .fitx9-about-message small {
    all: initial !important;

    display: block !important;

    margin-bottom: 4px !important;

    color: #8aa1ac !important;

    font-size: 7px !important;

    font-weight: 800 !important;

    font-family: Arial, Helvetica, sans-serif !important;

    letter-spacing: 1px !important;
}


section.fitx9-about .fitx9-about-message strong {
    all: initial !important;

    display: block !important;

    color: #244658 !important;

    font-size: 11px !important;

    line-height: 1.4 !important;

    font-weight: 800 !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


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

section.fitx9-about .fitx9-about-btn {
    all: initial !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    flex: 0 0 auto !important;

    padding: 6px 7px 6px 15px !important;

    border-radius: 50px !important;

    color: #ffffff !important;

    background: #123e53 !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    font-family: Arial, Helvetica, sans-serif !important;

    text-decoration: none !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition: .3s ease !important;
}


section.fitx9-about .fitx9-about-btn span {
    all: initial !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 29px !important;
    height: 29px !important;

    border-radius: 50% !important;

    color: #ffffff !important;

    background: #08a8df !important;

    font-size: 13px !important;

    font-family: Arial, Helvetica, sans-serif !important;
}


section.fitx9-about .fitx9-about-btn:hover {
    background: #086080 !important;

    transform: translateY(-2px) !important;

    color: #ffffff !important;
}


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

@keyframes fitx9Float {

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

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


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

@media (max-width: 991px) {

    section.fitx9-about {
        padding: 70px 0 !important;
    }

    section.fitx9-about .fitx9-about-inner {
        grid-template-columns: 1fr !important;

        gap: 55px !important;
    }

    section.fitx9-about .fitx9-about-left {
        width: min(650px, 100%) !important;

        min-height: 500px !important;

        margin: 0 auto !important;
    }

    section.fitx9-about .fitx9-about-right {
        width: min(700px, 100%) !important;

        margin: 0 auto !important;
    }
}


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

@media (max-width: 575px) {

    section.fitx9-about {
        padding: 55px 0 !important;
    }

    section.fitx9-about .fitx9-about-inner {
        width: calc(100% - 30px) !important;

        gap: 40px !important;
    }

    section.fitx9-about .fitx9-about-left {
        min-height: 380px !important;
    }

    section.fitx9-about .fitx9-about-image {
        border-radius: 21px !important;
    }

    section.fitx9-about .fitx9-about-trusted {
        top: 18px !important;
        right: -5px !important;

        min-width: 175px !important;

        padding: 10px 12px !important;
    }

    section.fitx9-about .fitx9-about-experience {
        left: 12px !important;
        bottom: 15px !important;
    }

    section.fitx9-about .fitx9-about-right > h2,
    section.fitx9-about .fitx9-about-right > h2 strong {
        font-size: 34px !important;

        letter-spacing: -1.3px !important;
    }

    section.fitx9-about .fitx9-about-desc {
        font-size: 13px !important;
    }

    section.fitx9-about .fitx9-about-item {
        padding: 13px 35px 13px 12px !important;

        gap: 10px !important;
    }

    section.fitx9-about .fitx9-about-icon {
        width: 36px !important;
        height: 36px !important;

        flex-basis: 36px !important;
    }

    section.fitx9-about .fitx9-about-item-content h3 {
        font-size: 11px !important;
    }

    section.fitx9-about .fitx9-about-item-content p {
        font-size: 9px !important;
    }

    section.fitx9-about .fitx9-about-bottom {
        flex-wrap: wrap !important;
    }

    section.fitx9-about .fitx9-about-separator {
        display: none !important;
    }

    section.fitx9-about .fitx9-about-message {
        flex-basis: calc(100% - 80px) !important;
    }

    section.fitx9-about .fitx9-about-btn {
        width: 100% !important;

        justify-content: space-between !important;
    }
}



/* 
========================================slider ===================================== */


/* ==========================================================
   SIMPLE SLIDER - FINAL PREMIUM OVERRIDE
   PUT THIS CSS AT THE VERY END OF YOUR CSS FILE
========================================================== */

.simple-slider {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 680px !important;
    padding: 70px 0 75px !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    background:
        linear-gradient(
            135deg,
            #f9fcff 0%,
            #eef8fd 50%,
            #ffffff 100%
        ) !important;
}


/* ==========================================================
   BACKGROUND DOTS
========================================================== */

.simple-slider::before {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background-image:
        radial-gradient(
            rgba(0,130,190,.10) 1px,
            transparent 1px
        ) !important;

    background-size: 23px 23px !important;

    opacity: .35 !important;

    pointer-events: none !important;
}


/* ==========================================================
   SLIDE - DESKTOP
========================================================== */

.simple-slider .simple-slide {
    position: relative !important;

    width: min(1180px, calc(100% - 70px)) !important;

    max-width: 1180px !important;

    min-height: 500px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    display: none !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 55px !important;

    box-sizing: border-box !important;
}


/* ONLY ACTIVE SLIDE */

.simple-slider .simple-slide.active {
    display: grid !important;
}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.simple-slider .simple-content {
    position: relative !important;

    width: 100% !important;

    max-width: 560px !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    z-index: 5 !important;
}


/* LABEL */

.simple-slider .simple-label {
    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

    padding: 10px 17px !important;

    margin: 0 0 20px !important;

    border-radius: 50px !important;

    background: #ffffff !important;

    border: 1px solid #deedf3 !important;

    color: #087fc0 !important;

    font-size: 9px !important;

    font-weight: 800 !important;

    letter-spacing: 1.2px !important;

    box-shadow:
        0 8px 25px rgba(20,80,105,.06) !important;

    box-sizing: border-box !important;
}


.simple-slider .simple-label::before {
    content: "" !important;

    width: 7px !important;
    height: 7px !important;

    flex: 0 0 7px !important;

    border-radius: 50% !important;

    background: #08a9df !important;

    box-shadow:
        0 0 0 4px rgba(8,169,223,.10) !important;
}


/* ==========================================================
   HEADING
========================================================== */

.simple-slider .simple-content h1 {
    width: 100% !important;

    max-width: 600px !important;

    margin: 0 0 22px !important;

    padding: 0 !important;

    color: #102f42 !important;

    font-size: clamp(40px, 4.3vw, 59px) !important;

    line-height: 1.04 !important;

    font-weight: 800 !important;

    letter-spacing: -2.5px !important;

    word-break: normal !important;

    overflow-wrap: normal !important;

    box-sizing: border-box !important;
}


.simple-slider .simple-content h1 span {
    display: block !important;

    margin-top: 4px !important;

    color: #0785d5 !important;

    font-weight: 800 !important;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.simple-slider .simple-content p {
    width: 100% !important;

    max-width: 550px !important;

    margin: 0 0 28px !important;

    padding: 0 !important;

    color: #718995 !important;

    font-size: 14px !important;

    line-height: 1.85 !important;

    box-sizing: border-box !important;
}


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

.simple-slider .simple-buttons {
    display: flex !important;

    align-items: center !important;

    gap: 11px !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
}


.simple-slider .simple-btn,
.simple-slider .simple-btn-outline {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-height: 48px !important;

    padding: 0 20px !important;

    border-radius: 10px !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    text-decoration: none !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;

    transition: .3s ease !important;
}


/* PRIMARY */

.simple-slider .simple-btn {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #0b9ce0,
            #006cba
        ) !important;

    border: 0 !important;

    box-shadow:
        0 12px 28px rgba(0,130,200,.20) !important;
}


.simple-slider .simple-btn:hover {
    color: #ffffff !important;

    transform: translateY(-3px) !important;

    box-shadow:
        0 18px 35px rgba(0,130,200,.28) !important;
}


/* SECONDARY */

.simple-slider .simple-btn-outline {
    color: #16465d !important;

    background: #ffffff !important;

    border: 1px solid #dceaf0 !important;
}


.simple-slider .simple-btn-outline:hover {
    color: #0785c5 !important;

    border-color: #b8dfea !important;

    transform: translateY(-3px) !important;

    box-shadow:
        0 12px 28px rgba(24,81,105,.08) !important;
}


/* ==========================================================
   RIGHT IMAGE
========================================================== */

.simple-slider .simple-image {

    position: relative !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 10px !important;

    background: #ffffff !important;

    border: 1px solid #dceaf1 !important;

    border-radius: 25px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    box-shadow:
        0 30px 70px rgba(18,73,97,.15) !important;
}


/* IMAGE */

.simple-slider .simple-image img {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 0 !important;

    object-fit: contain !important;

    object-position: center !important;

    border-radius: 17px !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   ARROWS
========================================================== */

.simple-slider .simple-prev,
.simple-slider .simple-next {

    position: absolute !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    z-index: 20 !important;

    width: 44px !important;

    height: 44px !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 50% !important;

    border: 1px solid #dceaf0 !important;

    background: #ffffff !important;

    color: #0786c5 !important;

    font-size: 15px !important;

    line-height: 1 !important;

    box-shadow:
        0 10px 25px rgba(20,78,103,.12) !important;

    cursor: pointer !important;
}


.simple-slider .simple-prev {
    left: 18px !important;
}


.simple-slider .simple-next {
    right: 18px !important;
}


.simple-slider .simple-prev:hover,
.simple-slider .simple-next:hover {

    color: #ffffff !important;

    background: #078fc9 !important;

    border-color: #078fc9 !important;

    transform:
        translateY(-50%)
        scale(1.06) !important;
}


/* ==========================================================
   DOTS
========================================================== */

.simple-slider .simple-dots {

    position: absolute !important;

    left: 50% !important;

    bottom: 23px !important;

    transform: translateX(-50%) !important;

    z-index: 20 !important;

    display: flex !important;

    align-items: center !important;

    gap: 7px !important;
}


.simple-slider .simple-dots button {

    width: 7px !important;

    height: 7px !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 50% !important;

    background: #bdd2dc !important;

    cursor: pointer !important;
}


.simple-slider .simple-dots button.active {

    width: 25px !important;

    border-radius: 10px !important;

    background: #078fc9 !important;
}


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

@media (max-width: 991px) {

    .simple-slider {

        min-height: auto !important;

        padding: 65px 0 75px !important;
    }


    .simple-slider .simple-slide {

        width: min(
            720px,
            calc(100% - 40px)
        ) !important;

        max-width: 720px !important;

        min-height: auto !important;

        display: none !important;

        grid-template-columns: 1fr !important;

        gap: 40px !important;

        text-align: center !important;
    }


    .simple-slider .simple-slide.active {

        display: grid !important;
    }


    .simple-slider .simple-content {

        width: 100% !important;

        max-width: 680px !important;

        margin: 0 auto !important;
    }


    .simple-slider .simple-label {

        margin-left: auto !important;

        margin-right: auto !important;
    }


    .simple-slider .simple-content h1 {

        max-width: 680px !important;

        margin-left: auto !important;

        margin-right: auto !important;

        font-size: 48px !important;
    }


    .simple-slider .simple-content p {

        max-width: 650px !important;

        margin-left: auto !important;

        margin-right: auto !important;
    }


    .simple-slider .simple-buttons {

        justify-content: center !important;
    }


    .simple-slider .simple-image {

        width: 100% !important;

        max-width: 680px !important;

        margin: 0 auto !important;

        padding: 8px !important;
    }


    .simple-slider .simple-image img {

        width: 100% !important;

        height: auto !important;

        object-fit: contain !important;
    }


    .simple-slider .simple-prev {

        left: 10px !important;
    }


    .simple-slider .simple-next {

        right: 10px !important;
    }
}


/* ==========================================================
   MOBILE - IMPORTANT
========================================================== */

@media (max-width: 576px) {

    .simple-slider {

        width: 100% !important;

        min-height: auto !important;

        padding: 42px 0 60px !important;

        overflow: hidden !important;
    }


    .simple-slider .simple-slide {

        width: calc(100% - 28px) !important;

        max-width: none !important;

        min-height: auto !important;

        margin: 0 14px !important;

        padding: 0 !important;

        display: none !important;

        grid-template-columns: 1fr !important;

        gap: 30px !important;

        text-align: center !important;
    }


    .simple-slider .simple-slide.active {

        display: grid !important;
    }


    /* CONTENT */

    .simple-slider .simple-content {

        width: 100% !important;

        max-width: none !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    /* LABEL */

    .simple-slider .simple-label {

        display: inline-flex !important;

        margin: 0 auto 15px !important;

        padding: 9px 13px !important;

        font-size: 7px !important;

        letter-spacing: 1px !important;
    }


    /* HEADING */

    .simple-slider .simple-content h1 {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto 18px !important;

        padding: 0 !important;

        font-size: 32px !important;

        line-height: 1.08 !important;

        letter-spacing: -1.2px !important;

        word-break: normal !important;
    }


    .simple-slider .simple-content h1 span {

        margin-top: 3px !important;
    }


    /* DESCRIPTION */

    .simple-slider .simple-content p {

        width: 100% !important;

        max-width: 100% !important;

        margin: 0 auto 22px !important;

        font-size: 12px !important;

        line-height: 1.75 !important;
    }


    /* BUTTONS */

    .simple-slider .simple-buttons {

        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 9px !important;

        margin: 0 !important;
    }


    .simple-slider .simple-btn,
    .simple-slider .simple-btn-outline {

        width: 100% !important;

        min-height: 47px !important;

        padding: 0 15px !important;

        font-size: 10px !important;
    }


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

    .simple-slider .simple-image {

        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 6px !important;

        border-radius: 18px !important;

        background: #ffffff !important;

        box-sizing: border-box !important;

        box-shadow:
            0 18px 45px rgba(18,73,97,.13) !important;
    }


    .simple-slider .simple-image img {

        width: 100% !important;

        height: auto !important;

        max-width: 100% !important;

        max-height: none !important;

        display: block !important;

        object-fit: contain !important;

        object-position: center !important;

        border-radius: 13px !important;
    }


    /* ======================================================
       MOBILE ARROWS
       DON'T COVER CONTENT
    ====================================================== */

    .simple-slider .simple-prev,
    .simple-slider .simple-next {

        top: auto !important;

        bottom: 22px !important;

        transform: none !important;

        width: 34px !important;

        height: 34px !important;

        font-size: 12px !important;

        z-index: 30 !important;
    }


    .simple-slider .simple-prev {

        left: 15px !important;
    }


    .simple-slider .simple-next {

        right: 15px !important;
    }


    .simple-slider .simple-prev:hover,
    .simple-slider .simple-next:hover {

        transform: scale(1.05) !important;
    }


    /* DOTS */

    .simple-slider .simple-dots {

        bottom: 34px !important;

        gap: 6px !important;
    }


    .simple-slider .simple-dots button {

        width: 6px !important;

        height: 6px !important;
    }


    .simple-slider .simple-dots button.active {

        width: 20px !important;
    }
}


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

@media (max-width: 380px) {

    .simple-slider .simple-content h1 {

        font-size: 28px !important;

        letter-spacing: -1px !important;
    }


    .simple-slider .simple-content p {

        font-size: 11px !important;
    }


    .simple-slider .simple-slide {

        width: calc(100% - 22px) !important;

        margin-left: 11px !important;

        margin-right: 11px !important;

        gap: 25px !important;
    }


    .simple-slider .simple-image {

        padding: 5px !important;

        border-radius: 15px !important;
    }


    .simple-slider .simple-image img {

        border-radius: 11px !important;
    }
}



/* ==========================================================
   DESKTOP RESPONSIVE FIX
   PUT AT VERY END OF CSS
========================================================== */

.simple-slider {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}


/* DESKTOP SLIDE */

.simple-slider .simple-slide {
    width: min(1140px, calc(100% - 100px)) !important;
    max-width: 1140px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    display: none !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    gap: 45px !important;

    align-items: center !important;

    box-sizing: border-box !important;
}


.simple-slider .simple-slide.active {
    display: grid !important;
}


/* LEFT */

.simple-slider .simple-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* HEADING */

.simple-slider .simple-content h1 {
    width: 100% !important;
    max-width: 100% !important;

    font-size: clamp(38px, 4vw, 55px) !important;

    line-height: 1.06 !important;

    letter-spacing: -2px !important;

    word-break: normal !important;

    overflow-wrap: normal !important;
}


/* DESCRIPTION */

.simple-slider .simple-content p {
    width: 100% !important;
    max-width: 100% !important;

    font-size: 14px !important;

    line-height: 1.75 !important;
}


/* RIGHT IMAGE */

.simple-slider .simple-image {
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    height: auto !important;

    padding: 8px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


.simple-slider .simple-image img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    object-fit: contain !important;

    object-position: center !important;
}


/* ==========================================================
   1200 - 1400
========================================================== */

@media (max-width: 1400px) and (min-width: 993px) {

    .simple-slider .simple-slide {
        width: calc(100% - 100px) !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        gap: 35px !important;
    }

    .simple-slider .simple-content h1 {
        font-size: 48px !important;
    }

    .simple-slider .simple-image {
        width: 100% !important;
    }
}


/* ==========================================================
   1100 - 1200
========================================================== */

@media (max-width: 1200px) and (min-width: 993px) {

    .simple-slider .simple-slide {
        width: calc(100% - 70px) !important;

        gap: 30px !important;
    }

    .simple-slider .simple-content h1 {
        font-size: 43px !important;

        letter-spacing: -1.7px !important;
    }

    .simple-slider .simple-content p {
        font-size: 13px !important;
    }
}


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

@media (max-width: 992px) {

    .simple-slider .simple-slide {

        width: calc(100% - 40px) !important;

        max-width: 720px !important;

        display: none !important;

        grid-template-columns: 1fr !important;

        gap: 35px !important;

        text-align: center !important;
    }

    .simple-slider .simple-slide.active {
        display: grid !important;
    }

    .simple-slider .simple-content {
        width: 100% !important;

        max-width: 680px !important;

        margin: auto !important;

        overflow: visible !important;
    }

    .simple-slider .simple-image {
        width: 100% !important;

        max-width: 680px !important;

        margin: auto !important;
    }
}


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

@media (max-width: 576px) {

    .simple-slider .simple-slide {

        width: calc(100% - 28px) !important;

        max-width: none !important;

        margin-left: 14px !important;
        margin-right: 14px !important;

        grid-template-columns: 1fr !important;

        gap: 30px !important;
    }

    .simple-slider .simple-content h1 {

        font-size: 32px !important;

        line-height: 1.08 !important;

        letter-spacing: -1.2px !important;
    }

    .simple-slider .simple-content p {

        font-size: 12px !important;

        line-height: 1.75 !important;
    }

    .simple-slider .simple-image {

        width: 100% !important;

        max-width: 100% !important;

        padding: 6px !important;

        border-radius: 18px !important;
    }

    .simple-slider .simple-image img {

        width: 100% !important;

        height: auto !important;

        object-fit: contain !important;
    }
}





/* ===========================menu buttion ========================== */

/* =========================================================
   FUTURE INFOSYS
   FINAL MOBILE MENU FIX
========================================================= */

@media (max-width: 991px) {


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

    #site-header-menu {
        position: relative !important;

        z-index: 999999 !important;

        width: 100% !important;
    }


    #site-header-menu .site-header-menu-inner {
        position: relative !important;

        z-index: 999999 !important;
    }


    #site-header-menu .site-navigation {
        position: relative !important;

        z-index: 999999 !important;
    }


    /* =====================================================
       HAMBURGER
    ===================================================== */

    #site-header-menu .btn-show-menu-mobile {

        position: relative !important;

        z-index: 1000001 !important;

        display: block !important;

        width: 42px !important;

        height: 42px !important;

        cursor: pointer !important;

        pointer-events: auto !important;
    }


    #site-header-menu
    .btn-show-menu-mobile .menubar-box {

        position: relative !important;

        z-index: 1000002 !important;

        pointer-events: none !important;
    }


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

    #site-header-menu #menu {

        position: absolute !important;

        top: 100% !important;

        left: 0 !important;

        right: 0 !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: calc(100vh - 75px) !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow-x: hidden !important;

        overflow-y: auto !important;

        background: #ffffff !important;

        border-top: 3px solid #08a9df !important;

        box-shadow:
            0 18px 40px rgba(20,70,95,.15) !important;

        z-index: 1000000 !important;

        box-sizing: border-box !important;
    }


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

    #site-header-menu #menu.fitx-mobile-open {

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        height: auto !important;

        max-height: calc(100vh - 75px) !important;
    }


    /* =====================================================
       UL
    ===================================================== */

    #site-header-menu #menu > ul.menu {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        max-height: none !important;

        margin: 0 !important;

        padding: 7px 15px 15px !important;

        overflow: visible !important;

        background: #ffffff !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       EVERY LI
    ===================================================== */

    #site-header-menu #menu > ul.menu > li {

        position: relative !important;

        display: block !important;

        float: none !important;

        clear: both !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: visible !important;

        border-bottom: 1px solid #edf2f5 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       MAIN LINKS
    ===================================================== */

    #site-header-menu #menu > ul.menu > li > a {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        width: 100% !important;

        min-height: 48px !important;

        height: auto !important;

        margin: 0 !important;

        padding: 13px 8px !important;

        color: #173d50 !important;

        background: transparent !important;

        font-size: 13px !important;

        line-height: 1.4 !important;

        font-weight: 600 !important;

        text-align: left !important;

        text-decoration: none !important;

        white-space: normal !important;

        box-sizing: border-box !important;
    }


    #site-header-menu #menu > ul.menu > li > a:hover {

        color: #078fc9 !important;

        background: #f5fbfe !important;
    }


    /* =====================================================
       ACTIVE
    ===================================================== */

    #site-header-menu #menu > ul.menu > li.active > a {

        color: #078fc9 !important;
    }


    /* =====================================================
       IT SOLUTIONS DROPDOWN
    ===================================================== */

    #site-header-menu #menu
    ul.mega-submenu {

        position: static !important;

        display: none !important;

        visibility: visible !important;

        opacity: 1 !important;

        width: 100% !important;

        height: auto !important;

        max-height: none !important;

        min-height: 0 !important;

        margin: 0 !important;

        padding: 5px 8px 10px 18px !important;

        overflow: visible !important;

        background: #f7fbfd !important;

        border: 0 !important;

        box-shadow: none !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* OPEN DROPDOWN */

    #site-header-menu #menu
    li.fitx-sub-open > ul.mega-submenu {

        display: block !important;
    }


    /* =====================================================
       DROPDOWN LI
    ===================================================== */

    #site-header-menu #menu
    ul.mega-submenu li {

        display: block !important;

        float: none !important;

        clear: both !important;

        width: 100% !important;

        height: auto !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       DROPDOWN LINKS
    ===================================================== */

    #site-header-menu #menu
    ul.mega-submenu li a {

        display: block !important;

        width: 100% !important;

        height: auto !important;

        min-height: 38px !important;

        margin: 0 !important;

        padding: 10px 8px !important;

        color: #617985 !important;

        background: transparent !important;

        font-size: 11px !important;

        line-height: 1.4 !important;

        font-weight: 500 !important;

        text-align: left !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    #site-header-menu #menu
    ul.mega-submenu li a:hover {

        color: #078fc9 !important;

        background: #edf8fc !important;
    }


    /* =====================================================
       SLIDER BELOW HEADER
    ===================================================== */

    .simple-slider {

        position: relative !important;

        z-index: 1 !important;
    }


    .simple-slider::before,
    .simple-slider::after {

        pointer-events: none !important;
    }

}


/* =========================================================
   HAMBURGER ACTIVE
========================================================= */


@media (max-width: 991px) {

    .btn-show-menu-mobile,
    .btn-show-menu-mobile:hover,
    .btn-show-menu-mobile:focus,
    .btn-show-menu-mobile.active {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

}



@media (max-width: 991px) {

    #site-header-menu {
        position: relative !important;
        z-index: 999999 !important;
    }

    #site-header-menu .site-navigation {
        position: relative !important;
        z-index: 999999 !important;
    }

    .btn-show-menu-mobile {
        position: relative !important;
        z-index: 1000001 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    #menu {
        position: absolute !important;

        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        height: auto !important;

        max-height: calc(100vh - 80px) !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        background: #fff !important;

        z-index: 1000000 !important;
    }

    #menu.fitx-mobile-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #menu > ul.menu {
        display: block !important;

        width: 100% !important;

        height: auto !important;

        padding: 7px 15px 15px !important;

        margin: 0 !important;

        overflow: visible !important;
    }

    #menu > ul.menu > li {
        display: block !important;

        float: none !important;

        width: 100% !important;

        height: auto !important;

        min-height: 0 !important;

        overflow: visible !important;
    }

    #menu > ul.menu > li > a {
        display: flex !important;

        width: 100% !important;

        min-height: 48px !important;

        align-items: center !important;

        padding: 12px 8px !important;

        color: #173d50 !important;

        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    /* IT SOLUTIONS */

    #menu .mega-submenu {
        display: none !important;

        position: static !important;

        width: 100% !important;

        height: auto !important;

        padding: 5px 10px 10px 18px !important;

        margin: 0 !important;

        overflow: visible !important;

        background: #f7fbfd !important;

        box-shadow: none !important;
    }

    #menu .mega-menu-item.fitx-sub-open .mega-submenu {
        display: block !important;
    }


    /* SLIDER NEVER COMES ABOVE MENU */

    .simple-slider {
        position: relative !important;
        z-index: 1 !important;
    }

}




/* =========================================================
   FUTURE INFOSYS
   SOFTWARE DEVELOPMENT PREMIUM BANNER
   UNIQUE PREFIX: fitsoft
========================================================= */

.fitsoft-banner {

    position: relative;

    width: 100%;

    min-height: 520px;

    padding: 65px 0 55px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f9fcff 0%,
            #eef8fd 52%,
            #ffffff 100%
        );

    box-sizing: border-box;
}


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

.fitsoft-banner::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        radial-gradient(
            rgba(0,130,190,.10) 1px,
            transparent 1px
        );

    background-size: 23px 23px;

    opacity: .38;

    pointer-events: none;
}


.fitsoft-bg-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.fitsoft-glow-left {

    width: 520px;
    height: 520px;

    left: -350px;
    top: -300px;

    background:
        radial-gradient(
            circle,
            rgba(0,168,225,.15),
            transparent 70%
        );
}


.fitsoft-glow-right {

    width: 450px;
    height: 450px;

    right: -280px;
    bottom: -300px;

    background:
        radial-gradient(
            circle,
            rgba(0,112,195,.10),
            transparent 70%
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.fitsoft-container {

    position: relative;

    z-index: 3;

    width: min(
        1150px,
        calc(100% - 50px)
    );

    min-height: 390px;

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, .85fr);

    align-items: center;

    gap: 65px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT
========================================================= */

.fitsoft-content {

    max-width: 580px;

    min-width: 0;
}


/* BADGE */

.fitsoft-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 15px;

    margin-bottom: 18px;

    border-radius: 50px;

    background: #ffffff;

    border: 1px solid #deedf3;

    color: #087fba;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.2px;

    box-shadow:
        0 8px 25px rgba(20,80,105,.06);
}


.fitsoft-badge span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #08a9df;

    box-shadow:
        0 0 0 4px rgba(8,169,223,.10);
}


/* KICKER */

.fitsoft-kicker {

    margin-bottom: 7px;

    color: #78929e;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* HEADING */

.fitsoft-content h1 {

    margin: 0;

    color: #102f42;

    font-size: clamp(
        48px,
        5vw,
        72px
    );

    line-height: .98;

    font-weight: 800;

    letter-spacing: -3px;
}


.fitsoft-content h1 strong {

    display: block;

    color: #0787d4;

    font-weight: 800;
}


/* DESCRIPTION */

.fitsoft-content p {

    max-width: 500px;

    margin: 23px 0 20px;

    color: #718995;

    font-size: 14px;

    line-height: 1.8;
}


/* LINE */

.fitsoft-line {

    width: 100px;

    height: 3px;

    background: #d7eaf2;

    border-radius: 10px;

    overflow: hidden;
}


.fitsoft-line span {

    display: block;

    width: 45px;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #08a9df,
            #087fd0
        );

    border-radius: 10px;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.fitsoft-visual {

    position: relative;

    width: 100%;

    max-width: 500px;

    height: 370px;

    margin: auto;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(232,247,253,.92)
        );

    border: 1px solid #dcecf2;

    box-shadow:
        0 25px 60px rgba(20,78,101,.12);

    overflow: hidden;
}


/* =========================================================
   ORBITS
========================================================= */

.fitsoft-orbit {

    position: absolute;

    left: 50%;
    top: 48%;

    transform:
        translate(-50%, -50%);

    border: 1px solid rgba(7,145,202,.18);

    border-radius: 50%;
}


.fitsoft-orbit-one {

    width: 280px;
    height: 280px;
}


.fitsoft-orbit-two {

    width: 190px;
    height: 190px;
}


/* =========================================================
   CORE
========================================================= */

.fitsoft-core {

    position: absolute;

    left: 50%;
    top: 48%;

    transform:
        translate(-50%, -50%);

    width: 115px;
    height: 115px;

    display: flex;

    flex-direction: column;

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

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            #079fe0,
            #006ab5
        );

    color: #ffffff;

    box-shadow:
        0 20px 40px rgba(0,125,190,.25);

    z-index: 5;
}


.fitsoft-core-icon {

    margin-bottom: 6px;

    font-family: monospace;

    font-size: 23px;

    font-weight: 800;
}


.fitsoft-core strong {

    font-size: 10px;

    letter-spacing: 1.2px;
}


.fitsoft-core small {

    margin-top: 4px;

    font-size: 5px;

    opacity: .75;

    letter-spacing: .8px;
}


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

.fitsoft-card {

    position: absolute;

    z-index: 8;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 13px;

    min-width: 170px;

    border-radius: 14px;

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

    border: 1px solid #deedf2;

    box-shadow:
        0 15px 35px rgba(20,75,98,.12);
}


.fitsoft-card > span {

    width: 31px;
    height: 31px;

    flex: 0 0 31px;

    display: flex;

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

    border-radius: 9px;

    color: #078bc5;

    background: #edf8fc;

    font-size: 8px;

    font-weight: 900;
}


.fitsoft-card small {

    display: block;

    margin-bottom: 3px;

    color: #8ca0a9;

    font-size: 5px;

    font-weight: 800;

    letter-spacing: .8px;
}


.fitsoft-card strong {

    display: block;

    color: #193e50;

    font-size: 8px;

    font-weight: 800;
}


.fitsoft-card-one {

    left: 20px;

    top: 48px;
}


.fitsoft-card-two {

    right: 18px;

    top: 45px;
}


.fitsoft-card-three {

    left: 50%;

    bottom: 25px;

    transform: translateX(-50%);
}


/* =========================================================
   BREADCRUMB
========================================================= */

.fitsoft-breadcrumb {

    position: absolute;

    left: 0;

    bottom: 0;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 9px 14px;

    border-radius: 50px;

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

    border: 1px solid #deedf2;

    box-shadow:
        0 8px 22px rgba(25,75,98,.06);

    font-size: 9px;
}


.fitsoft-breadcrumb a {

    color: #718995;

    text-decoration: none;
}


.fitsoft-breadcrumb span {

    color: #0b9bd6;
}


.fitsoft-breadcrumb strong {

    color: #087fba;
}


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

@media (max-width: 991px) {

    .fitsoft-banner {

        padding: 60px 0 70px;

        min-height: auto;
    }


    .fitsoft-container {

        width: calc(100% - 40px);

        max-width: 720px;

        min-height: auto;

        grid-template-columns: 1fr;

        gap: 40px;
    }


    .fitsoft-content {

        max-width: 680px;

        margin: auto;

        text-align: center;
    }


    .fitsoft-badge {

        margin-left: auto;

        margin-right: auto;
    }


    .fitsoft-content h1 {

        font-size: 55px;
    }


    .fitsoft-content p {

        margin-left: auto;

        margin-right: auto;
    }


    .fitsoft-line {

        margin-left: auto;

        margin-right: auto;
    }


    .fitsoft-visual {

        width: 100%;

        max-width: 620px;

        height: 360px;
    }


    .fitsoft-breadcrumb {

        position: relative;

        left: auto;

        bottom: auto;

        width: fit-content;

        margin: 35px auto 0;
    }
}


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

@media (max-width: 576px) {

    .fitsoft-banner {

        padding: 45px 0 55px;

        min-height: auto;

        overflow: hidden;
    }


    .fitsoft-container {

        width: calc(100% - 28px);

        margin: 0 14px;

        gap: 30px;
    }


    .fitsoft-content {

        width: 100%;

        max-width: none;

        text-align: center;
    }


    .fitsoft-badge {

        padding: 8px 12px;

        margin-bottom: 14px;

        font-size: 7px;

        letter-spacing: .8px;
    }


    .fitsoft-kicker {

        font-size: 8px;

        letter-spacing: 1.4px;
    }


    .fitsoft-content h1 {

        font-size: 40px;

        line-height: 1.03;

        letter-spacing: -1.7px;
    }


    .fitsoft-content p {

        width: 100%;

        max-width: none;

        margin: 18px auto;

        font-size: 12px;

        line-height: 1.7;
    }


    /* VISUAL */

    .fitsoft-visual {

        width: 100%;

        max-width: none;

        height: 285px;

        min-height: 285px;

        border-radius: 21px;
    }


    .fitsoft-orbit-one {

        width: 210px;

        height: 210px;
    }


    .fitsoft-orbit-two {

        width: 145px;

        height: 145px;
    }


    .fitsoft-core {

        width: 70px;

        height: 70px;

        border-radius: 20px;
    }


    .fitsoft-core-icon {

        font-size: 16px;

        margin-bottom: 3px;
    }


    .fitsoft-core strong {

        font-size: 7px;
    }


    .fitsoft-core small {

        font-size: 4px;
    }


    /* FLOATING CARDS */

    .fitsoft-card {

        min-width: 125px;

        padding: 7px 8px;

        gap: 6px;

        border-radius: 10px;
    }


    .fitsoft-card > span {

        width: 25px;

        height: 25px;

        flex-basis: 25px;

        border-radius: 7px;

        font-size: 6px;
    }


    .fitsoft-card small {

        font-size: 4px;

        margin-bottom: 2px;
    }


    .fitsoft-card strong {

        font-size: 6px;
    }


    .fitsoft-card-one {

        left: 8px;

        top: 28px;
    }


    .fitsoft-card-two {

        right: 8px;

        top: 28px;
    }


    .fitsoft-card-three {

        bottom: 12px;
    }


    /* BREADCRUMB */

    .fitsoft-breadcrumb {

        width: 100%;

        justify-content: center;

        margin-top: 27px;

        padding: 9px 10px;

        border-radius: 11px;

        font-size: 8px;
    }
}


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

@media (max-width: 380px) {

    .fitsoft-content h1 {

        font-size: 35px;
    }


    .fitsoft-visual {

        height: 260px;

        min-height: 260px;
    }


    .fitsoft-orbit-one {

        width: 185px;

        height: 185px;
    }


    .fitsoft-orbit-two {

        width: 125px;

        height: 125px;
    }


    .fitsoft-card {

        min-width: 112px;
    }


    .fitsoft-card-one {

        left: 5px;
    }


    .fitsoft-card-two {

        right: 5px;
    }
}



/* ================================================================================ */


/* =========================================================
   FUTURE INFOSYS - SOFTWARE DEVELOPMENT
   MODERN PREMIUM DESIGN
   ========================================================= */

.fit-pro-software {
    --fit-blue: #1769ff;
    --fit-cyan: #00b8ff;
    --fit-dark: #10233f;
    --fit-text: #52627a;
    --fit-light: #f4f9ff;
    --fit-border: #dce8f5;

    position: relative;
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 8%, rgba(23,105,255,.09), transparent 25%),
        radial-gradient(circle at 92% 18%, rgba(0,184,255,.08), transparent 25%),
        #f7fbff;
    font-family: inherit;
    padding: 90px 0 70px;
}


/* CONTAINER */

.fit-pro-container {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
}


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

.fit-pro-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 70px;
    min-height: 570px;
}


/* HERO CONTENT */

.fit-pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border: 1px solid #d6e7f8;
    border-radius: 50px;
    background: rgba(255,255,255,.85);
    color: var(--fit-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    box-shadow: 0 8px 25px rgba(22,78,130,.06);
}

.fit-pro-badge span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fit-cyan);
    box-shadow: 0 0 0 5px rgba(0,184,255,.12);
}


.fit-pro-hero h1 {
    margin: 22px 0 8px;
    color: var(--fit-dark);
    font-size: clamp(45px, 5vw, 72px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -2.5px;
}

.fit-pro-hero h1 strong {
    display: block;
    color: var(--fit-blue);
}


.fit-pro-trusted {
    margin: 0 0 28px;
    color: #65748a;
    font-size: 18px;
    font-weight: 700;
}


.fit-pro-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 30px;
}

.fit-pro-stats div {
    min-width: 125px;
    padding: 0 22px;
    border-left: 1px solid #d9e5f0;
}

.fit-pro-stats div:first-child {
    padding-left: 0;
    border-left: 0;
}

.fit-pro-stats strong {
    display: block;
    color: var(--fit-blue);
    font-size: 25px;
    line-height: 1;
}

.fit-pro-stats span {
    display: block;
    margin-top: 7px;
    color: #718096;
    font-size: 11px;
    font-weight: 700;
}


.fit-pro-description {
    max-width: 670px;
    margin: 0;
    color: var(--fit-text);
    font-size: 15px;
    line-height: 1.9;
}

.fit-pro-description b {
    color: var(--fit-dark);
}


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

.fit-pro-visual {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.fit-pro-circle {
    position: absolute;
    border: 1px solid rgba(23,105,255,.14);
    border-radius: 50%;
}

.fit-pro-circle-1 {
    width: 430px;
    height: 430px;
}

.fit-pro-circle-2 {
    width: 300px;
    height: 300px;
}


.fit-pro-code-card {
    position: relative;
    z-index: 3;
    width: min(360px, 75%);
    min-height: 245px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    box-shadow:
        0 30px 70px rgba(36,85,130,.16),
        inset 0 1px 0 #fff;
    transform: rotate(-3deg);
}


.fit-pro-code-top {
    display: flex;
    gap: 7px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e8eef5;
}

.fit-pro-code-top span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cbd7e5;
}


.fit-pro-code-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 35px 18px;
    font-family: monospace;
}

.fit-pro-code-content span {
    color: #7d8ca2;
    font-size: 13px;
}

.fit-pro-code-content b {
    color: var(--fit-blue);
    font-size: 29px;
}

.fit-pro-code-content em {
    color: #233b59;
    font-size: 20px;
    font-style: normal;
}


.fit-pro-floating {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 17px;
    border: 1px solid #e0ebf6;
    border-radius: 13px;
    background: rgba(255,255,255,.96);
    color: #344963;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 15px 35px rgba(40,80,120,.13);
}

.fit-pro-floating i {
    color: var(--fit-blue);
    font-size: 17px;
}

.fit-pro-floating-one {
    top: 65px;
    left: 5px;
}

.fit-pro-floating-two {
    right: 0;
    top: 145px;
}

.fit-pro-floating-three {
    bottom: 65px;
    left: 35px;
}


/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.fit-pro-section-heading,
.fit-pro-erp-header {
    text-align: center;
    max-width: 760px;
    margin: 100px auto 45px;
}

.fit-pro-section-heading > span,
.fit-pro-erp-header > span,
.fit-pro-bottom > div > span {
    color: var(--fit-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}


.fit-pro-section-heading h2,
.fit-pro-erp-header h2 {
    margin: 12px 0;
    color: var(--fit-dark);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -1.5px;
}

.fit-pro-section-heading h2 strong,
.fit-pro-erp-header h2 strong {
    color: var(--fit-blue);
}

.fit-pro-section-heading p,
.fit-pro-erp-header p {
    margin: 0;
    color: var(--fit-text);
    line-height: 1.8;
}


/* =========================================================
   DEVELOPMENT SOLUTIONS
   ========================================================= */

.fit-pro-solution-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}


.fit-pro-solution-card {
    position: relative;
    overflow: hidden;
    min-height: 205px;
    padding: 28px 23px;
    border: 1px solid var(--fit-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(38,80,120,.06);
    transition: .3s ease;
}

.fit-pro-solution-card:hover {
    transform: translateY(-7px);
    border-color: #bcd8f4;
    box-shadow: 0 22px 45px rgba(35,90,150,.12);
}


.fit-pro-solution-card > span {
    position: absolute;
    top: 17px;
    right: 20px;
    color: #dce9f7;
    font-size: 32px;
    font-weight: 900;
}


.fit-pro-solution-card i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 22px;
    border-radius: 13px;
    background: #edf6ff;
    color: var(--fit-blue);
    font-size: 19px;
}


.fit-pro-solution-card h3 {
    margin: 0 0 9px;
    color: var(--fit-dark);
    font-size: 16px;
    font-weight: 800;
}

.fit-pro-solution-card p {
    margin: 0;
    color: #6c7b8f;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   ERP MODULE GRID
   ========================================================= */

.fit-pro-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}


.fit-pro-module-card {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border: 1px solid var(--fit-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(38,80,120,.055);
    transition: .3s ease;
}

.fit-pro-module-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(30,85,140,.12);
    border-color: #bdd8f3;
}


.fit-pro-module-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--fit-blue), var(--fit-cyan));
    opacity: .8;
}


.fit-pro-module-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 22px;
    border-radius: 15px;
    background: linear-gradient(135deg, #edf5ff, #eafaff);
    color: var(--fit-blue);
    font-size: 20px;
}


.fit-pro-module-number {
    position: absolute;
    top: 27px;
    right: 27px;
    color: #e6eef7;
    font-size: 30px;
    font-weight: 900;
}


.fit-pro-module-card h3 {
    margin: 0 0 13px;
    padding-right: 30px;
    color: var(--fit-dark);
    font-size: 19px;
    line-height: 1.35;
    font-weight: 800;
}


.fit-pro-module-card p {
    margin: 0 0 18px;
    color: var(--fit-text);
    font-size: 13px;
    line-height: 1.8;
}


.fit-pro-module-card > b {
    display: block;
    margin-bottom: 10px;
    color: var(--fit-dark);
    font-size: 13px;
}


.fit-pro-module-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fit-pro-module-card li {
    position: relative;
    padding: 6px 0 6px 20px;
    color: #66778c;
    font-size: 12px;
    line-height: 1.5;
}

.fit-pro-module-card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--fit-blue);
    font-weight: 900;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.fit-pro-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 75px;
    padding: 45px 50px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 90% 20%, rgba(0,184,255,.2), transparent 28%),
        linear-gradient(135deg, #102a4b, #123c67);
    box-shadow: 0 25px 60px rgba(22,57,95,.16);
}


.fit-pro-bottom > div {
    max-width: 780px;
}

.fit-pro-bottom h2 {
    margin: 10px 0 12px;
    color: #fff;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.15;
}

.fit-pro-bottom h2 strong {
    color: #58d6ff;
}

.fit-pro-bottom p {
    margin: 0;
    color: #d0deeb;
    font-size: 14px;
    line-height: 1.8;
}


.fit-pro-bottom a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 23px;
    border-radius: 10px;
    background: #fff;
    color: var(--fit-blue);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: .25s ease;
}

.fit-pro-bottom a:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}


.fit-pro-ready {
    margin: 25px 0 0;
    text-align: center;
    color: #64748a;
    font-size: 14px;
}

.fit-pro-ready b {
    color: var(--fit-dark);
}


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

@media (max-width: 1100px) {

    .fit-pro-hero {
        gap: 35px;
    }

    .fit-pro-solution-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fit-pro-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 767px) {

    .fit-pro-software {
        padding: 55px 0 45px;
    }

    .fit-pro-container {
        width: min(100% - 28px, 1180px);
    }


    .fit-pro-hero {
        grid-template-columns: 1fr;
        gap: 30px;
        min-height: auto;
    }


    .fit-pro-hero-content {
        text-align: center;
    }

    .fit-pro-badge {
        font-size: 9px;
    }

    .fit-pro-hero h1 {
        margin-top: 20px;
        font-size: 46px;
        letter-spacing: -1.5px;
    }

    .fit-pro-trusted {
        font-size: 16px;
    }


    .fit-pro-stats {
        justify-content: center;
    }

    .fit-pro-stats div {
        min-width: auto;
        padding: 0 13px;
    }

    .fit-pro-stats strong {
        font-size: 21px;
    }

    .fit-pro-stats span {
        font-size: 9px;
    }


    .fit-pro-description {
        text-align: left;
        font-size: 14px;
        line-height: 1.8;
    }


    .fit-pro-visual {
        min-height: 330px;
    }

    .fit-pro-circle-1 {
        width: 290px;
        height: 290px;
    }

    .fit-pro-circle-2 {
        width: 205px;
        height: 205px;
    }

    .fit-pro-code-card {
        width: 270px;
        min-height: 190px;
    }

    .fit-pro-code-content {
        padding: 22px 10px;
    }

    .fit-pro-code-content b {
        font-size: 22px;
    }

    .fit-pro-code-content em {
        font-size: 15px;
    }


    .fit-pro-floating {
        padding: 9px 11px;
        font-size: 9px;
    }

    .fit-pro-floating i {
        font-size: 13px;
    }

    .fit-pro-floating-one {
        top: 20px;
        left: 0;
    }

    .fit-pro-floating-two {
        right: 0;
        top: 95px;
    }

    .fit-pro-floating-three {
        bottom: 25px;
        left: 0;
    }


    .fit-pro-section-heading,
    .fit-pro-erp-header {
        margin-top: 65px;
        margin-bottom: 30px;
    }

    .fit-pro-section-heading h2,
    .fit-pro-erp-header h2 {
        font-size: 32px;
    }


    .fit-pro-solution-grid {
        grid-template-columns: 1fr;
    }

    .fit-pro-solution-card {
        min-height: auto;
    }


    .fit-pro-module-grid {
        grid-template-columns: 1fr;
    }


    .fit-pro-module-card {
        padding: 25px 22px;
    }


    .fit-pro-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 25px;
        margin-top: 50px;
    }

    .fit-pro-bottom a {
        width: 100%;
        justify-content: center;
    }

}


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

@media (max-width: 420px) {

    .fit-pro-hero h1 {
        font-size: 39px;
    }

    .fit-pro-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .fit-pro-stats div {
        padding: 0 7px;
    }

    .fit-pro-stats strong {
        font-size: 18px;
    }

    .fit-pro-stats span {
        font-size: 8px;
    }

    .fit-pro-visual {
        min-height: 285px;
    }

    .fit-pro-code-card {
        width: 235px;
    }

    .fit-pro-floating {
        transform: scale(.88);
    }

}




/* =========================================================
   FUTURE INFOSYS - MOBILE MENU OVERRIDE
========================================================= */

#site-header-menu {
    position: relative;
    z-index: 99990 !important;
}

#site-header-menu .site-header-menu-inner {
    position: relative;
    z-index: 99990 !important;
}

#site-header-menu .site-navigation {
    position: relative;
    z-index: 99990 !important;
}


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

@media (max-width: 991px) {

    #site-header-menu .btn-show-menu-mobile {
        position: relative !important;
        z-index: 100000 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }


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

    #site-header-menu #menu {
        position: absolute !important;

        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: calc(100vh - 75px) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        display: none !important;

        background: #ffffff !important;

        z-index: 99999 !important;

        pointer-events: auto !important;

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10) !important;
    }


    /* OPEN MENU */

    #site-header-menu #menu.fitx-mobile-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


    /* =====================================================
       UL
    ===================================================== */

    #site-header-menu #menu > ul.menu {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 10px 14px !important;

        list-style: none !important;
    }


    /* =====================================================
       LI
    ===================================================== */

    #site-header-menu #menu > ul.menu > li {
        display: block !important;

        width: 100% !important;

        float: none !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;
    }


    /* =====================================================
       ALL MAIN LINKS
    ===================================================== */

    #site-header-menu #menu > ul.menu > li > a {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        min-height: 49px !important;

        padding: 13px 8px !important;

        color: #173b52 !important;

        background: transparent !important;

        text-decoration: none !important;

        cursor: pointer !important;

        pointer-events: auto !important;

        border-bottom: 1px solid #e8eef2 !important;

        box-sizing: border-box !important;
    }


    /* HOVER */

    #site-header-menu #menu > ul.menu > li > a:hover {
        color: #008fd5 !important;
        background: #f5fbfe !important;
    }


    /* =====================================================
       SUBMENU
    ===================================================== */

    #site-header-menu #menu .mega-submenu {

        display: none !important;

        position: static !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 5px 0 8px 12px !important;

        background: #f7fbfd !important;

        box-shadow: none !important;

        border: 0 !important;
    }


    /* OPEN SUBMENU */

    #site-header-menu #menu .mega-menu-item.fitx-sub-open > .mega-submenu {
        display: block !important;
    }


    /* =====================================================
       SUBMENU LINKS
    ===================================================== */

    #site-header-menu #menu .mega-submenu li {
        display: block !important;

        width: 100% !important;

        float: none !important;
    }

    #site-header-menu #menu .mega-submenu li a {
        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        min-height: 43px !important;

        padding: 10px 12px !important;

        color: #36576b !important;

        background: transparent !important;

        text-decoration: none !important;

        cursor: pointer !important;

        pointer-events: auto !important;

        box-sizing: border-box !important;
    }

    #site-header-menu #menu .mega-submenu li a:hover {
        color: #008fd5 !important;
        background: #eef8fc !important;
    }


    /* =====================================================
       GET FREE DEMO
    ===================================================== */

    #site-header-menu #menu > ul.menu > li:last-child > a {
        margin-top: 10px !important;

        border: 1px solid #159ee0 !important;

        border-radius: 5px !important;

        background: #ffffff !important;

        color: #173b52 !important;

        justify-content: flex-start !important;
    }

    #site-header-menu #menu > ul.menu > li:last-child > a:hover {
        background: #159ee0 !important;
        color: #ffffff !important;
    }

}


/* =========================================================
   DESKTOP - DON'T BREAK ORIGINAL MENU
========================================================= */

@media (min-width: 992px) {

    #site-header-menu #menu {
        display: block !important;

        position: relative !important;

        z-index: 9999 !important;

        pointer-events: auto !important;
    }

}



@media (max-width: 991px) {

    #site-header-menu {
        position: relative !important;
        z-index: 999999 !important;
    }

    #site-header-menu .btn-show-menu-mobile {
        position: relative !important;
        z-index: 1000000 !important;
        pointer-events: auto !important;
    }

    #site-header-menu #menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;

        z-index: 999999 !important;

        pointer-events: auto !important;
    }

    #site-header-menu #menu.fitx-mobile-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #site-header-menu #menu a {
        position: relative !important;
        z-index: 1000000 !important;

        pointer-events: auto !important;
        cursor: pointer !important;
    }

}



/* ======================Logo ================================ */


/* =========================================
   FUTURE INFOSYS LOGO - ACTUAL SIZE FIX
========================================= */

#site-header-menu .site-branding {
    width: 280px !important;
    min-width: 280px !important;
    display: flex !important;
    align-items: center !important;
}

#site-header-menu .site-branding .home-link {
    display: flex !important;
    align-items: center !important;
    width: 280px !important;
    height: auto !important;
}

/* Logo actual visible size */
#site-header-menu #logo-img {
    width: 300px !important;
    height: auto !important;

    max-width: none !important;

    display: block !important;

    transform: scale(1.35) !important;
    transform-origin: left center !important;
}


/* =========================================
   MOBILE
========================================= */
/* =========================================
   LOGO FULL CONTENT VISIBLE
========================================= */

@media (min-width: 992px) {

    #site-header-menu,
    #site-header-menu .site-header-menu-inner,
    #site-header-menu .site-navigation,
    #site-header-menu .site-branding,
    #site-header-menu .home-link {
        overflow: visible !important;
    }

    #site-header-menu .site-header-menu-inner {
        min-height: 105px !important;
    }

    #site-header-menu .site-branding {
        width: 300px !important;
        min-width: 300px !important;
        height: 105px !important;
        display: flex !important;
        align-items: center !important;
    }

    #site-header-menu .home-link {
        width: 300px !important;
        display: block !important;
    }

    #site-header-menu #logo-img {
        width: 300px !important;
        height: auto !important;
        max-width: none !important;

        transform: scale(1.55) !important;
        transform-origin: left center !important;

        display: block !important;
    }

}



@media (max-width: 991px) {

    #site-header-menu #logo-img {
        width: 220px !important;
        transform: scale(1.10) !important;
        transform-origin: left center !important;
    }

}



.fi-logo {
    width: 230px !important;
    height: 70px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    background: transparent !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;
}

.fi-logo img {
    width: 220px !important;
    height: auto !important;

    max-width: none !important;

    display: block !important;

    background: transparent !important;

    object-fit: contain !important;

    transform: none !important;
}


/* Mobile */
@media (max-width: 991px) {

    .fi-logo {
        width: 190px !important;
        height: 60px !important;
    }

    .fi-logo img {
        width: 180px !important;
    }

}

.fi-logo,
.fi-logo::before,
.fi-logo::after {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}




/* =========================================================
   FUTURE INFOSYS - PREMIUM CONTACT CTA
   ISOLATED CSS - FOOTER / MENU SAFE
========================================================= */

section.fi-contact-premium {
    position: relative !important;
    width: 100% !important;
    min-height: 500px !important;
    padding: 90px 7% !important;
    margin: 0 !important;
    overflow: hidden !important;

    background:
        radial-gradient(circle at 80% 20%, rgba(38, 132, 255, .13), transparent 30%),
        radial-gradient(circle at 10% 90%, rgba(0, 194, 255, .10), transparent 30%),
        linear-gradient(135deg, #f7fbff 0%, #edf6ff 50%, #f9fcff 100%) !important;

    box-sizing: border-box !important;
}

/* subtle grid */
section.fi-contact-premium::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;

    background-image:
        linear-gradient(rgba(30, 110, 200, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 110, 200, .045) 1px, transparent 1px) !important;

    background-size: 45px 45px !important;
}


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

section.fi-contact-premium .fi-contact-glow {
    position: absolute !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    filter: blur(5px) !important;
}

section.fi-contact-premium .fi-contact-glow-one {
    width: 280px !important;
    height: 280px !important;
    top: -120px !important;
    right: 10% !important;
    background: rgba(0, 132, 255, .10) !important;
}

section.fi-contact-premium .fi-contact-glow-two {
    width: 220px !important;
    height: 220px !important;
    bottom: -100px !important;
    left: 5% !important;
    background: rgba(0, 207, 255, .08) !important;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

section.fi-contact-premium .fi-contact-wrapper {
    position: relative !important;
    z-index: 5 !important;

    width: 100% !important;
    max-width: 1250px !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr) !important;
    align-items: center !important;
    gap: 70px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

section.fi-contact-premium .fi-contact-content {
    width: 100% !important;
    max-width: 650px !important;
    margin: 0 !important;
    padding: 0 !important;

    display: block !important;
    box-sizing: border-box !important;
}


/* small label */

section.fi-contact-premium .fi-contact-label {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    margin: 0 0 22px !important;
    padding: 0 !important;

    color: #1478d4 !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    line-height: 1.4 !important;
}

section.fi-contact-premium .fi-contact-label span {
    width: 38px !important;
    height: 3px !important;
    display: inline-block !important;

    background: linear-gradient(
        90deg,
        #087cf0,
        #00c6ff
    ) !important;

    border-radius: 10px !important;
}


/* heading */

section.fi-contact-premium .fi-contact-content h2 {
    width: auto !important;
    max-width: 650px !important;

    margin: 0 0 22px !important;
    padding: 0 !important;

    color: #082b66 !important;

    font-family: Arial, sans-serif !important;
    font-size: clamp(42px, 5vw, 68px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -2px !important;

    white-space: normal !important;
}

section.fi-contact-premium .fi-contact-content h2 strong {
    display: inline !important;

    color: #087cf0 !important;
    font-weight: 800 !important;
}


/* paragraph */

section.fi-contact-premium .fi-contact-content p {
    width: 100% !important;
    max-width: 570px !important;

    margin: 0 0 30px !important;
    padding: 0 !important;

    color: #56708f !important;

    font-family: Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
}


/* button */

section.fi-contact-premium .fi-contact-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;

    min-width: 170px !important;
    height: 55px !important;

    padding: 0 22px !important;
    margin: 0 !important;

    border-radius: 12px !important;
    border: 0 !important;

    background: linear-gradient(
        135deg,
        #086cf0,
        #00aef5
    ) !important;

    color: #ffffff !important;
    text-decoration: none !important;

    font-size: 15px !important;
    font-weight: 700 !important;

    box-shadow:
        0 12px 30px rgba(0, 111, 240, .22) !important;

    transition: all .3s ease !important;
}

section.fi-contact-premium .fi-contact-btn span {
    font-size: 21px !important;
    line-height: 1 !important;
}

section.fi-contact-premium .fi-contact-btn:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-4px) !important;

    box-shadow:
        0 18px 38px rgba(0, 111, 240, .30) !important;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

section.fi-contact-premium .fi-contact-visual {
    position: relative !important;

    width: 100% !important;
    max-width: 520px !important;
    height: 380px !important;

    margin: 0 auto !important;

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

    box-sizing: border-box !important;
}


/* background lines */

section.fi-contact-premium .fi-contact-lines {
    position: absolute !important;
    inset: 35px !important;

    border-radius: 35px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(235,246,255,.85)
        ) !important;

    border: 1px solid rgba(57, 145, 225, .14) !important;

    box-shadow:
        0 25px 70px rgba(29, 101, 170, .12) !important;

    overflow: hidden !important;
}


/* decorative diagonal lines */

section.fi-contact-premium .fi-contact-lines::before,
section.fi-contact-premium .fi-contact-lines::after {
    content: "" !important;
    position: absolute !important;

    width: 180% !important;
    height: 1px !important;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(20, 128, 230, .15),
        transparent
    ) !important;

    transform: rotate(-25deg) !important;
}

section.fi-contact-premium .fi-contact-lines::before {
    top: 35% !important;
    left: -40% !important;
}

section.fi-contact-premium .fi-contact-lines::after {
    top: 65% !important;
    left: -40% !important;
}


/* =========================================================
   CENTER CIRCLE
========================================================= */

section.fi-contact-premium .fi-contact-circle {
    position: relative !important;
    z-index: 5 !important;

    width: 145px !important;
    height: 145px !important;

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

    border-radius: 50% !important;

    background: linear-gradient(
        145deg,
        #087cf0,
        #00bdf5
    ) !important;

    box-shadow:
        0 20px 45px rgba(0, 119, 240, .30),
        0 0 0 18px rgba(10, 126, 240, .06),
        0 0 0 38px rgba(10, 126, 240, .035) !important;
}


/* icon */

section.fi-contact-premium .fi-contact-icon {
    width: 68px !important;
    height: 68px !important;

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

    border-radius: 22px !important;

    background: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(255,255,255,.30) !important;
}

section.fi-contact-premium .fi-contact-icon i {
    color: #ffffff !important;
    font-size: 30px !important;
}


/* =========================================================
   ORBITS
========================================================= */

section.fi-contact-premium .fi-contact-orbit {
    position: absolute !important;
    border: 1px solid rgba(20, 125, 230, .18) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

section.fi-contact-premium .fi-contact-orbit-one {
    width: 260px !important;
    height: 260px !important;
}

section.fi-contact-premium .fi-contact-orbit-two {
    width: 340px !important;
    height: 170px !important;
    transform: rotate(-25deg) !important;
}


/* =========================================================
   FLOATING CARD
========================================================= */

section.fi-contact-premium .fi-contact-mini-card {
    position: absolute !important;
    z-index: 10 !important;

    right: 0 !important;
    bottom: 18px !important;

    width: 285px !important;
    min-height: 82px !important;

    padding: 15px 17px !important;

    display: flex !important;
    align-items: center !important;
    gap: 13px !important;

    border-radius: 16px !important;

    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(45, 128, 210, .12) !important;

    box-shadow:
        0 18px 45px rgba(34, 92, 150, .16) !important;

    box-sizing: border-box !important;
}

section.fi-contact-premium .fi-contact-mini-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;

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

    border-radius: 13px !important;

    background: #eaf5ff !important;
}

section.fi-contact-premium .fi-contact-mini-icon i {
    color: #087cf0 !important;
    font-size: 19px !important;
}

section.fi-contact-premium .fi-contact-mini-card > div:nth-child(2) {
    min-width: 0 !important;
    flex: 1 !important;
}

section.fi-contact-premium .fi-contact-mini-card small {
    display: block !important;

    margin: 0 0 3px !important;

    color: #7b91aa !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1.3px !important;
}

section.fi-contact-premium .fi-contact-mini-card strong {
    display: block !important;

    color: #123967 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

section.fi-contact-premium .fi-contact-mini-card > span {
    color: #087cf0 !important;
    font-size: 23px !important;
    font-weight: 600 !important;
}


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

@media (max-width: 991px) {

    section.fi-contact-premium {
        min-height: auto !important;
        padding: 70px 25px !important;
    }

    section.fi-contact-premium .fi-contact-wrapper {
        grid-template-columns: 1fr !important;
        gap: 55px !important;
        max-width: 750px !important;
    }

    section.fi-contact-premium .fi-contact-content {
        max-width: 100% !important;
        text-align: center !important;
    }

    section.fi-contact-premium .fi-contact-label {
        justify-content: center !important;
    }

    section.fi-contact-premium .fi-contact-content h2 {
        max-width: 700px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 48px !important;
    }

    section.fi-contact-premium .fi-contact-content p {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    section.fi-contact-premium .fi-contact-visual {
        margin: 0 auto !important;
    }
}


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

@media (max-width: 600px) {

    section.fi-contact-premium {
        padding: 55px 18px !important;
    }

    section.fi-contact-premium .fi-contact-wrapper {
        gap: 35px !important;
    }

    section.fi-contact-premium .fi-contact-label {
        font-size: 10px !important;
        letter-spacing: 1.4px !important;
    }

    section.fi-contact-premium .fi-contact-content h2 {
        font-size: 38px !important;
        line-height: 1.12 !important;
        letter-spacing: -1px !important;
    }

    section.fi-contact-premium .fi-contact-content p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    section.fi-contact-premium .fi-contact-visual {
        height: 310px !important;
    }

    section.fi-contact-premium .fi-contact-lines {
        inset: 15px !important;
        border-radius: 25px !important;
    }

    section.fi-contact-premium .fi-contact-circle {
        width: 115px !important;
        height: 115px !important;
    }

    section.fi-contact-premium .fi-contact-icon {
        width: 55px !important;
        height: 55px !important;
        border-radius: 17px !important;
    }

    section.fi-contact-premium .fi-contact-icon i {
        font-size: 24px !important;
    }

    section.fi-contact-premium .fi-contact-orbit-one {
        width: 210px !important;
        height: 210px !important;
    }

    section.fi-contact-premium .fi-contact-orbit-two {
        width: 270px !important;
        height: 135px !important;
    }

    section.fi-contact-premium .fi-contact-mini-card {
        right: 0 !important;
        bottom: 0 !important;
        width: 245px !important;
        min-height: 72px !important;
        padding: 11px !important;
    }

    section.fi-contact-premium .fi-contact-mini-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
    }

    section.fi-contact-premium .fi-contact-mini-card strong {
        font-size: 14px !important;
    }
}





/* =========================================================
   SERVICES PAGE
   Future Infosys Technologies
   ========================================================= */

.services-page {
    padding: 80px 0;
    background: #f7f9fc;
}

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

.services-title {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.services-title h1 {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #172033;
}

.services-title p {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
    color: #687386;
}


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

.service-card {
    position: relative;
    height: 100%;
    margin-bottom: 30px;
    padding: 35px 30px;
    background: #ffffff;
    border: 1px solid #e8ecf2;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(23, 32, 51, 0.06);

    display: flex;
    flex-direction: column;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.service-card:hover {
    transform: translateY(-8px);
    border-color: #d7deea;
    box-shadow: 0 18px 45px rgba(23, 32, 51, 0.12);
}


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

.service-icon {
    width: 65px;
    height: 65px;
    margin-bottom: 22px;

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

    border-radius: 14px;

    background: #f0f4ff;
    color: #315efb;

    font-size: 28px;

    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    background: #315efb;
    color: #ffffff;
    transform: scale(1.05);
}


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

.service-card h2 {
    margin: 0 0 15px;

    font-size: 23px;
    line-height: 1.35;
    font-weight: 700;

    color: #172033;
}


/* =========================================================
   SERVICE DESCRIPTION
   ========================================================= */

.service-card p {
    margin: 0 0 20px;

    font-size: 15px;
    line-height: 1.8;

    color: #687386;
}


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

.service-features {
    margin: 0 0 25px;
    padding: 0;

    list-style: none;
}

.service-features li {
    position: relative;

    display: flex;
    align-items: center;

    margin-bottom: 10px;

    font-size: 14px;
    line-height: 1.5;

    color: #4f5b6d;
}

.service-features li:last-child {
    margin-bottom: 0;
}

.service-features li i {
    margin-right: 10px;

    font-size: 13px;

    color: #2ca66f;
}


/* =========================================================
   SERVICE LINK
   ========================================================= */

.service-link {
    display: inline-flex;
    align-items: center;

    margin-top: auto;

    font-size: 15px;
    font-weight: 600;

    color: #315efb;
    text-decoration: none;

    transition: all 0.3s ease;
}

.service-link:hover {
    color: #172033;
    text-decoration: none;
    padding-left: 5px;
}


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

.services-cta {
    margin-top: 45px;
    padding: 50px 30px;

    text-align: center;

    background: #172033;
    border-radius: 18px;
}

.services-cta h2 {
    margin: 0 0 15px;

    font-size: 32px;
    line-height: 1.3;
    font-weight: 700;

    color: #ffffff;
}

.services-cta p {
    max-width: 700px;
    margin: 0 auto 25px;

    font-size: 16px;
    line-height: 1.7;

    color: #d9deea;
}


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

.services-cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;
    padding: 12px 28px;

    border-radius: 7px;

    background: #315efb;
    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;
}

.services-cta .btn:hover {
    background: #ffffff;
    color: #172033;
}


/* =========================================================
   PHONE LINK
   ========================================================= */

.services-cta .phone-link {
    display: inline-block;

    margin-left: 12px;

    font-size: 15px;
    font-weight: 600;

    color: #ffffff;

    text-decoration: none;
}

.services-cta .phone-link:hover {
    text-decoration: underline;
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 991px) {

    .services-page {
        padding: 65px 0;
    }

    .services-title {
        margin-bottom: 45px;
    }

    .services-title h1 {
        font-size: 36px;
    }

    .service-card {
        padding: 30px 25px;
    }

    .service-card h2 {
        font-size: 21px;
    }

    .services-cta h2 {
        font-size: 28px;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .services-page {
        padding: 50px 0;
    }

    .services-title {
        margin-bottom: 35px;
        padding: 0 10px;
    }

    .services-title h1 {
        font-size: 30px;
    }

    .services-title p {
        font-size: 15px;
        line-height: 1.7;
    }

    .service-card {
        padding: 28px 22px;
        margin-bottom: 20px;
        border-radius: 14px;
    }

    .service-icon {
        width: 58px;
        height: 58px;
        font-size: 24px;
    }

    .service-card h2 {
        font-size: 20px;
    }

    .service-card p {
        font-size: 14px;
    }

    .service-features li {
        font-size: 13px;
    }

    .services-cta {
        margin-top: 30px;
        padding: 35px 20px;
    }

    .services-cta h2 {
        font-size: 25px;
    }

    .services-cta p {
        font-size: 14px;
    }

    .services-cta .btn {
        width: 100%;
        margin-bottom: 15px;
    }

    .services-cta .phone-link {
        display: block;
        margin-left: 0;
    }
}


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

@media (max-width: 480px) {

    .services-title h1 {
        font-size: 26px;
    }

    .service-card {
        padding: 25px 20px;
    }

    .service-card h2 {
        font-size: 19px;
    }

    .services-cta h2 {
        font-size: 23px;
    }
}




/* =======================servcies =========================================== */


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

.services-hero {
    position: relative;
    min-height: 475px;
    overflow: hidden;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            135deg,
            #fbfdff 0%,
            #f1f8ff 55%,
            #e7f4ff 100%
        );

    color: #172d45;
}


/* =========================================================
   DOT BACKGROUND
   ========================================================= */

.services-bg-grid {
    position: absolute;
    inset: 0;

    opacity: .45;

    background-image:
        radial-gradient(
            #a7d0ed 1px,
            transparent 1px
        );

    background-size: 18px 18px;

    mask-image:
        linear-gradient(
            to right,
            black,
            transparent 95%
        );
}


/* =========================================================
   BACKGROUND GLOW
   ========================================================= */

.services-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}


.services-glow-1 {
    width: 500px;
    height: 500px;

    right: -80px;
    top: -220px;

    background:
        radial-gradient(
            circle,
            rgba(30, 157, 222, .17),
            transparent 70%
        );
}


.services-glow-2 {
    width: 400px;
    height: 400px;

    right: 180px;
    bottom: -280px;

    background:
        radial-gradient(
            circle,
            rgba(52, 135, 220, .12),
            transparent 70%
        );
}


/* =========================================================
   ORBITS
   ========================================================= */

.services-orbit {
    position: absolute;

    border: 1px solid
        rgba(53, 157, 216, .17);

    border-radius: 50%;

    pointer-events: none;
}


.services-orbit-1 {
    width: 560px;
    height: 560px;

    right: 70px;
    top: -205px;
}


.services-orbit-2 {
    width: 430px;
    height: 430px;

    right: 135px;
    top: -140px;
}


.services-orbit-3 {
    width: 690px;
    height: 690px;

    right: -10px;
    top: -270px;

    border-style: dashed;

    opacity: .35;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.services-hero-container {
    position: relative;
    z-index: 5;

    width: min(1120px, 90%);

    margin: auto;

    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 70px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.services-hero-content {
    position: relative;
    z-index: 10;
}


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

.services-company-badge {

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 10px 17px;

    margin-bottom: 22px;

    border: 1px solid
        rgba(53, 142, 210, .18);

    border-radius: 50px;

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

    box-shadow:
        0 8px 25px
        rgba(28,95,150,.06);

    font-size: 11px;

    letter-spacing: 1.2px;

    font-weight: 700;

    color: #35516d;
}


.services-company-badge span {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ff7043;

    box-shadow:
        0 0 0 5px
        rgba(255,112,67,.11);
}


/* =========================================================
   MAIN HEADING
   ========================================================= */

.services-hero-content h1 {

    margin: 0;

    font-size: 65px;

    line-height: 1;

    letter-spacing: -3px;

    font-weight: 800;

    color: #172d45;
}


.services-hero-content h1 strong {

    color: #1687d9;

    font-weight: 800;
}


/* =========================================================
   BLUE LINE
   ========================================================= */

.services-heading-line {

    width: 65px;
    height: 5px;

    margin: 21px 0 19px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #1689db,
            #54b8ed
        );
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.services-subtitle {

    max-width: 430px;

    margin: 0 0 12px;

    font-size: 18px;

    line-height: 1.6;

    color: #607b91;

    font-weight: 500;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.services-description {

    max-width: 530px;

    margin: 0;

    font-size: 14px;

    line-height: 1.8;

    color: #7a8e9e;
}


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.services-hero-visual {

    position: relative;

    height: 390px;
}


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

.services-glass-card {

    position: absolute;

    width: 405px;

    min-height: 260px;

    right: 25px;

    top: 35px;

    padding: 25px;

    border: 1px solid
        rgba(255,255,255,.9);

    border-radius: 22px;

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

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 25px 65px
        rgba(35,105,154,.13);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.services-card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 27px;
}


.services-brand {

    display: flex;

    align-items: center;

    gap: 10px;
}


.services-brand-icon {

    width: 36px;
    height: 36px;

    display: flex;

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

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #087fca,
            #3aafe9
        );

    color: white;

    font-size: 11px;

    font-weight: 700;
}


.services-brand strong {

    display: block;

    font-size: 12px;

    color: #294a63;
}


.services-brand small {

    display: block;

    margin-top: 2px;

    font-size: 9px;

    color: #8a9cab;
}


.services-status {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 9px;

    color: #6d8292;
}


.services-status i {

    width: 7px;
    height: 7px;

    display: block;

    border-radius: 50%;

    background: #19b47b;

    box-shadow:
        0 0 0 4px
        rgba(25,180,123,.12);
}


/* =========================================================
   CARD MAIN
   ========================================================= */

.services-card-main {

    display: flex;

    align-items: center;

    gap: 16px;
}


.services-main-icon {

    width: 60px;
    height: 60px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 16px;

    color: #0788d5;

    background:
        linear-gradient(
            135deg,
            #e3f5ff,
            #ccecff
        );

    font-size: 24px;
}


.services-card-main small {

    display: block;

    margin-bottom: 4px;

    font-size: 8px;

    letter-spacing: 1.4px;

    font-weight: 700;

    color: #8197a7;
}


.services-card-main h3 {

    margin: 0;

    font-size: 21px;

    color: #203e58;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.services-progress {

    margin-top: 25px;
}


.services-progress > div {

    display: flex;

    justify-content: space-between;

    margin-bottom: 7px;

    font-size: 9px;

    color: #718798;
}


.services-progress b {

    color: #1686d5;
}


.progress-line {

    display: block;

    height: 6px;

    overflow: hidden;

    border-radius: 10px;

    background: #deebf2;
}


.progress-line i {

    display: block;

    width: 100%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #1686d5,
            #54b8e9
        );

    border-radius: inherit;
}


/* =========================================================
   MINI ITEMS
   ========================================================= */

.services-mini-items {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

    margin-top: 20px;
}


.services-mini-items div {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 8px 5px;

    border-radius: 8px;

    background:
        rgba(235,246,253,.8);

    font-size: 9px;

    color: #587286;
}


.services-mini-items i {

    color: #1686d5;
}


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

.services-floating-card {

    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 13px;

    border:
        1px solid
        rgba(255,255,255,.85);

    border-radius: 11px;

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

    backdrop-filter: blur(14px);

    box-shadow:
        0 12px 30px
        rgba(30,103,151,.12);

    animation:
        serviceFloating 4s ease-in-out infinite;
}


.services-floating-card div {

    width: 31px;
    height: 31px;

    display: flex;

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

    border-radius: 8px;

    background: #e5f5ff;

    color: #1688d5;

    font-size: 13px;
}


.services-floating-card span {

    font-size: 10px;

    font-weight: 600;

    color: #405d73;
}


.services-float-1 {

    left: 0;

    top: 20px;
}


.services-float-2 {

    right: -5px;

    top: 0;

    animation-delay: .8s;
}


.services-float-2 div {

    color: #17a676;

    background: #e4f8f0;
}


.services-float-3 {

    left: 25px;

    bottom: 55px;

    animation-delay: 1.4s;
}


.services-float-3 div {

    color: #e88a38;

    background: #fff0e3;
}


@keyframes serviceFloating {

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

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


/* =========================================================
   BREADCRUMB
   ========================================================= */

.services-breadcrumb {

    position: absolute;

    right: 0;

    bottom: 5px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 11px 16px;

    border:
        1px solid
        rgba(255,255,255,.85);

    border-radius: 9px;

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

    backdrop-filter: blur(12px);

    box-shadow:
        0 8px 22px
        rgba(30,100,150,.07);

    font-size: 10px;
}


.services-breadcrumb a {

    display: flex;

    align-items: center;

    gap: 5px;

    color: #55748a;

    text-decoration: none;
}


.services-breadcrumb a:hover {

    color: #1686d5;
}


.services-breadcrumb span {

    color: #a6b6c2;
}


.services-breadcrumb strong {

    color: #1686d5;
}


/* =========================================================
   BOTTOM WAVE
   ========================================================= */

.services-bottom-wave {

    position: absolute;

    left: 0;

    bottom: -1px;

    width: 100%;

    height: 55px;

    z-index: 3;
}


.services-bottom-wave svg {

    display: block;

    width: 100%;

    height: 100%;
}


.services-bottom-wave path {

    fill: #fff;
}


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

@media (max-width: 991px) {

    .services-hero {

        padding: 70px 0 80px;

    }

    .services-hero-container {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .services-hero-content {

        text-align: center;

    }

    .services-heading-line {

        margin-left: auto;
        margin-right: auto;
    }

    .services-description {

        margin-left: auto;
        margin-right: auto;
    }

    .services-hero-visual {

        max-width: 600px;

        width: 100%;

        margin: auto;
    }

    .services-glass-card {

        right: 50%;

        transform:
            translateX(50%);
    }

}


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

@media (max-width: 767px) {

    .services-hero {

        min-height: auto;

        padding: 55px 0 75px;
    }

    .services-hero-container {

        width: 90%;
    }

    .services-company-badge {

        font-size: 9px;

        padding: 9px 13px;
    }

    .services-hero-content h1 {

        font-size: 52px;

        letter-spacing: -2px;
    }

    .services-subtitle {

        font-size: 16px;
    }

    .services-description {

        font-size: 13px;
    }

    .services-hero-visual {

        height: 410px;
    }

    .services-glass-card {

        width: 90%;

        right: 5%;

        transform: none;

        top: 55px;

        padding: 21px;
    }

    .services-floating-card {

        padding: 8px 10px;
    }

    .services-float-1 {

        left: 0;

        top: 20px;
    }

    .services-float-2 {

        right: 0;

        top: 5px;
    }

    .services-float-3 {

        left: 0;

        bottom: 35px;
    }

    .services-breadcrumb {

        display: none;
    }

    .services-orbit-3 {

        display: none;
    }

}


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

@media (max-width: 480px) {

    .services-hero-content h1 {

        font-size: 45px;
    }

    .services-float-2 {

        display: none;
    }

    .services-glass-card {

        width: 94%;

        right: 3%;
    }

}


/* =========================================================
   FUTURE INFOSYS TECHNOLOGIES
   PROFESSIONAL NAVIGATION
   ========================================================= */


/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

.main-menu {
    display: flex;
    align-items: center;

    margin-left: 55px;
    margin-right: 0;
}


/* =========================================================
   MAIN UL
   ========================================================= */

.main-menu > ul.menu {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 2px;

    margin: 0;

    padding: 0;

    list-style: none;
}


/* =========================================================
   MAIN LI
   ========================================================= */

.main-menu > ul.menu > li {

    position: relative;

    margin: 0;

    padding: 0;

    list-style: none;
}


/* =========================================================
   MAIN MENU LINKS
   ========================================================= */

.main-menu > ul.menu > li > a {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding: 0 13px;

    border-radius: 7px;

    color: #294c6b;

    background: transparent;

    font-size: 14px;

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}


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

.main-menu > ul.menu > li > a:hover {

    color: #1687d9;

    background: #f2f8fc;

}


/* =========================================================
   SERVICES ARROW
   ========================================================= */

.main-menu > ul.menu > li > a.mega-menu-link {

    padding-right: 29px;

}


/* CSS ARROW */

.main-menu > ul.menu > li > a.mega-menu-link::after {

    content: "";

    position: absolute;

    width: 6px;

    height: 6px;

    right: 11px;

    top: 50%;

    border-right: 1.5px solid #728799;

    border-bottom: 1.5px solid #728799;

    transform:
        translateY(-70%)
        rotate(45deg);

    transition:
        all .25s ease;

}


/* HOVER ARROW */

.main-menu > ul.menu > li:hover > a.mega-menu-link::after {

    border-color: #1687d9;

    transform:
        translateY(-20%)
        rotate(225deg);

}


/* =========================================================
   SERVICES DROPDOWN
   ========================================================= */

.main-menu > ul.menu > li > ul.mega-submenu {

    position: absolute;

    top: calc(100% + 10px);

    left: 50%;

    width: 310px;

    margin: 0;

    padding: 10px;

    list-style: none;

    background: #ffffff;

    border: 1px solid #e7edf3;

    border-radius: 12px;

    box-shadow:
        0 20px 50px
        rgba(26, 65, 94, .14);

    opacity: 0;

    visibility: hidden;

    transform:
        translate(-50%, 10px);

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

    z-index: 99999;
}


/* =========================================================
   DROPDOWN ARROW / TRIANGLE
   ========================================================= */

.main-menu > ul.menu > li > ul.mega-submenu::before {

    content: "";

    position: absolute;

    top: -6px;

    left: 50%;

    width: 11px;

    height: 11px;

    background: #ffffff;

    border-left: 1px solid #e7edf3;

    border-top: 1px solid #e7edf3;

    transform:
        translateX(-50%)
        rotate(45deg);

}


/* =========================================================
   SHOW DROPDOWN
   ========================================================= */

.main-menu > ul.menu > li:hover > ul.mega-submenu {

    opacity: 1;

    visibility: visible;

    transform:
        translate(-50%, 0);

}


/* =========================================================
   DROPDOWN LI
   ========================================================= */

.main-menu > ul.menu > li > ul.mega-submenu > li {

    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    list-style: none;
}


/* =========================================================
   DROPDOWN LINK
   ========================================================= */

.main-menu > ul.menu > li > ul.mega-submenu > li > a {

    display: flex !important;

    align-items: center;

    gap: 12px;

    width: 100%;

    min-height: 44px;

    padding: 0 12px !important;

    border-radius: 7px;

    color: #4b657a;

    background: transparent;

    font-size: 13px;

    font-weight: 500;

    line-height: 1.3;

    text-decoration: none;

    transition:
        color .2s ease,
        background .2s ease,
        padding .2s ease;
}


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

.main-menu > ul.menu > li > ul.mega-submenu > li > a i {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 22px;

    min-width: 22px;

    height: 22px;

    border-radius: 6px;

    color: #1687d9;

    background: #edf7fd;

    font-size: 11px;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}


/* =========================================================
   DROPDOWN TEXT
   ========================================================= */

.main-menu > ul.menu > li > ul.mega-submenu > li > a span {

    flex: 1;

    white-space: nowrap;
}


/* =========================================================
   DROPDOWN HOVER
   ========================================================= */

.main-menu > ul.menu > li > ul.mega-submenu > li > a:hover {

    color: #1687d9;

    background: #f3f9fd;

    padding-left: 16px !important;
}


.main-menu > ul.menu > li > ul.mega-submenu > li > a:hover i {

    color: #ffffff;

    background: #1687d9;

    transform: scale(1.08);
}


/* =========================================================
   GET FREE DEMO
   ========================================================= */

.main-menu > ul.menu > li.demo-menu-item > a {

    min-height: 40px;

    margin-left: 8px;

    padding:
        0 18px;

    border-radius: 7px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #1286d9,
            #269fe2
        );

    box-shadow:
        0 8px 20px
        rgba(18, 134, 217, .20);

    font-size: 12px;

    font-weight: 700;
}


.main-menu > ul.menu > li.demo-menu-item > a:hover {

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #0d76c2,
            #1e91d3
        );

    transform:
        translateY(-2px);

    box-shadow:
        0 11px 25px
        rgba(18, 134, 217, .27);
}


/* =========================================================
   REMOVE OLD DROPDOWN DOT
   ========================================================= */

.main-menu > ul.menu > li > ul.mega-submenu > li > a::before {

    display: none !important;

    content: none !important;
}


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

@media (max-width: 991px) {

    .main-menu {

        width: 100%;

        margin-left: 0;

    }


    .main-menu > ul.menu {

        display: block;

        width: 100%;

        padding: 10px 0;

    }


    .main-menu > ul.menu > li {

        display: block;

        width: 100%;

    }


    .main-menu > ul.menu > li > a {

        justify-content: flex-start;

        width: 100%;

        min-height: 46px;

        padding: 0 18px;

    }


    /* Dropdown */

    .main-menu > ul.menu > li > ul.mega-submenu {

        position: static;

        width: 100%;

        padding: 5px 0 5px 15px;

        border: 0;

        border-radius: 0;

        box-shadow: none;

        background: transparent;

        opacity: 1;

        visibility: visible;

        transform: none;

        display: none;

    }


    .main-menu > ul.menu > li:hover > ul.mega-submenu {

        transform: none;

    }


    .main-menu > ul.menu > li > ul.mega-submenu::before {

        display: none;

    }


    .main-menu > ul.menu > li > ul.mega-submenu > li > a {

        min-height: 42px;

        background: #f6fafc;

    }


    .main-menu > ul.menu > li.demo-menu-item > a {

        width: calc(100% - 20px);

        margin:
            8px 10px;

        justify-content: center;

    }

}


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

@media (max-width: 480px) {

    .main-menu > ul.menu > li > a {

        font-size: 13px;

    }


    .main-menu > ul.menu > li > ul.mega-submenu > li > a {

        font-size: 12px;

    }

}



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

.main-menu > ul.menu > li > ul.mega-submenu > li > a {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    min-height: 44px !important;

    padding: 0 12px !important;

    color: #4b657a !important;

    background: transparent !important;

    font-size: 13px !important;

    font-weight: 500 !important;

    text-decoration: none !important;

    transition: all .2s ease;
}


/* ICON */

.main-menu > ul.menu > li > ul.mega-submenu > li > a i {

    width: 23px !important;

    min-width: 23px !important;

    height: 23px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border-radius: 6px !important;

    color: #1687d9 !important;

    background: #edf7fd !important;

    font-size: 12px !important;

}


/* TEXT */

.main-menu > ul.menu > li > ul.mega-submenu > li > a span {

    flex: 1;

    white-space: nowrap;

}


/* HOVER */

.main-menu > ul.menu > li > ul.mega-submenu > li > a:hover {

    color: #1687d9 !important;

    background: #f2f8fc !important;

    padding-left: 16px !important;

}


.main-menu > ul.menu > li > ul.mega-submenu > li > a:hover i {

    color: #ffffff !important;

    background: #1687d9 !important;

}



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

.main-menu .services-menu-item {
    position: relative !important;
}


/* =========================================================
   SERVICES MAIN LINK
   ========================================================= */

.main-menu .services-menu-item > a.mega-menu-link {

    display: flex !important;

    align-items: center !important;

    gap: 7px !important;

    padding-right: 12px !important;

    color: #294c6b !important;

    text-decoration: none !important;

    white-space: nowrap !important;
}


/* =========================================================
   REMOVE THEME'S OLD ARROW
   ========================================================= */

.main-menu .services-menu-item > a.mega-menu-link::before,
.main-menu .services-menu-item > a.mega-menu-link::after {

    content: none !important;

    display: none !important;
}


/* =========================================================
   SERVICES ARROW
   ========================================================= */

.main-menu .services-menu-item .services-arrow {

    display: inline-block !important;

    width: 6px !important;

    height: 6px !important;

    flex-shrink: 0 !important;

    margin-top: -3px !important;

    border-right: 1.5px solid #1687d9 !important;

    border-bottom: 1.5px solid #1687d9 !important;

    transform: rotate(45deg) !important;

    transition: all .25s ease !important;
}


/* =========================================================
   ARROW ON HOVER
   ========================================================= */

.main-menu .services-menu-item:hover .services-arrow {

    margin-top: 3px !important;

    transform: rotate(225deg) !important;

    border-color: #1687d9 !important;
}


/* =========================================================
   SERVICES DROPDOWN
   ========================================================= */

.main-menu .services-menu-item > .mega-submenu {

    position: absolute !important;

    top: calc(100% + 8px) !important;

    left: 50% !important;

    width: 310px !important;

    margin: 0 !important;

    padding: 10px !important;

    background: #ffffff !important;

    border: 1px solid #e6edf3 !important;

    border-radius: 12px !important;

    box-shadow:
        0 18px 45px rgba(25, 65, 95, 0.15) !important;

    list-style: none !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transform:
        translateX(-50%)
        translateY(10px) !important;

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease !important;

    z-index: 99999 !important;
}


/* =========================================================
   SHOW DROPDOWN
   ========================================================= */

.main-menu .services-menu-item:hover > .mega-submenu {

    opacity: 1 !important;

    visibility: visible !important;

    transform:
        translateX(-50%)
        translateY(0) !important;
}


/* =========================================================
   DROPDOWN TOP ARROW
   ========================================================= */

.main-menu .services-menu-item > .mega-submenu::before {

    content: "" !important;

    position: absolute !important;

    top: -6px !important;

    left: 50% !important;

    width: 11px !important;

    height: 11px !important;

    background: #ffffff !important;

    border-left: 1px solid #e6edf3 !important;

    border-top: 1px solid #e6edf3 !important;

    transform:
        translateX(-50%)
        rotate(45deg) !important;
}


/* =========================================================
   DROPDOWN ITEMS
   ========================================================= */

.main-menu .services-menu-item > .mega-submenu > li {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    list-style: none !important;
}


/* =========================================================
   DROPDOWN LINKS
   ========================================================= */

.main-menu .services-menu-item > .mega-submenu > li > a {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    width: 100% !important;

    min-height: 44px !important;

    padding: 0 12px !important;

    box-sizing: border-box !important;

    color: #4b657a !important;

    background: transparent !important;

    border-radius: 7px !important;

    font-size: 13px !important;

    font-weight: 500 !important;

    line-height: 1.3 !important;

    text-decoration: none !important;

    transition: all .2s ease !important;
}


/* =========================================================
   REMOVE OLD DOT
   ========================================================= */

.main-menu .services-menu-item > .mega-submenu > li > a::before {

    display: none !important;

    content: none !important;
}


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

.main-menu .services-menu-item > .mega-submenu > li > a i {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 24px !important;

    min-width: 24px !important;

    height: 24px !important;

    margin: 0 !important;

    border-radius: 6px !important;

    color: #1687d9 !important;

    background: #edf7fd !important;

    font-size: 12px !important;

    transition: all .2s ease !important;
}


/* =========================================================
   SERVICE TEXT
   ========================================================= */

.main-menu .services-menu-item > .mega-submenu > li > a span {

    flex: 1 !important;

    display: block !important;

    white-space: nowrap !important;
}


/* =========================================================
   DROPDOWN HOVER
   ========================================================= */

.main-menu .services-menu-item > .mega-submenu > li > a:hover {

    color: #1687d9 !important;

    background: #f2f8fc !important;

    padding-left: 16px !important;
}


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

.main-menu .services-menu-item > .mega-submenu > li > a:hover i {

    color: #ffffff !important;

    background: #1687d9 !important;

    transform: scale(1.08) !important;
}


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

@media (max-width: 991px) {

    .main-menu .services-menu-item > .mega-submenu {

        position: static !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 5px 0 5px 15px !important;

        border: 0 !important;

        border-radius: 0 !important;

        box-shadow: none !important;

        transform: none !important;
    }

}




/* ===================================================police======================= */


:root {
    --navy: #102a43;
    --blue: #1769aa;
    --green: #18a878;
    --text: #243447;
    --muted: #62748a;
    --border: #e5edf4;
    --background: #f4f8fc;
}

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

body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--background);
    color: var(--text);
    line-height: 1.7;
}

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

a:hover {
    text-decoration: underline;
}

.container {
    width: min(1080px, calc(100% - 40px));
    margin: auto;
}

/* Topbar */

.topbar {
    background: var(--navy);
    color: #fff;
    padding: 12px 0;
    font-size: 14px;
}

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

.topbar a {
    color: #fff;
}

/* Navigation */

.navbar {
    background: #fff;
    border-bottom: 1px solid var(--border);
}

.nav-inner {
    padding: 20px 0;
}

.logo {
    color: var(--navy);
    font-size: 21px;
    font-weight: 800;
}

.logo span {
    color: var(--green);
}

.nav-links a {
    margin-left: 18px;
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
}

/* Hero Section */

.hero {
    background: linear-gradient(
        120deg,
        #102a43 0%,
        #1769aa 100%
    );
    color: #fff;
    padding: 48px 0;
}

.eyebrow {
    color: #9ee6ce;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero h1 {
    font-size: clamp(32px, 5vw, 46px);
    line-height: 1.15;
    margin: 8px 0;
}

.hero p {
    max-width: 760px;
    color: #e7f1fa;
}

/* Main Content */

.content {
    padding-top: 30px;
    padding-bottom: 45px;
}

.policy-meta {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 18px;
}

.policy-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: clamp(22px, 4vw, 40px);
    box-shadow: 0 10px 35px rgba(16, 42, 67, 0.06);
}

.policy-card h2 {
    color: var(--navy);
    font-size: 21px;
    margin: 28px 0 8px;
}

.policy-card h2:first-child {
    margin-top: 0;
}

.policy-card p {
    margin: 8px 0 14px;
}

.policy-card ul {
    padding-left: 22px;
    margin: 8px 0 16px;
}

.policy-card li {
    padding: 3px 0;
}

/* Notice */

.notice {
    background: #f0f8ff;
    border-left: 4px solid var(--blue);
    border-radius: 7px;
    padding: 14px 17px;
    margin: 18px 0;
}

/* Contact */

.contact-card {
    background: #f7fafc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 17px;
}

/* Footer */

.footer {
    background: var(--navy);
    color: #dce8f2;
    padding: 22px 0;
    font-size: 14px;
}

.footer a {
    color: #9ee6ce;
}

/* Responsive */

@media (max-width: 650px) {
    .nav-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .nav-links a {
        margin: 0 14px 0 0;
    }

    .hero {
        padding: 38px 0;
    }

    .topbar-inner,
    .footer-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}




/* =========================================
   FUTURE INFOSYS - PRIVACY PAGE PREMIUM UI
   Add this CSS at the END of your stylesheet
========================================= */

/* Main Background */
body:has(.policy-card) {
    background: #f5f8fc !important;
}

/* HERO SECTION */
.page .hero {
    position: relative !important;
    isolation: isolate;
    overflow: hidden;
    width: 100% !important;
    min-height: 290px !important;
    padding: 65px 0 !important;
    display: flex !important;
    align-items: center !important;

    background:
        radial-gradient(circle at 85% 20%, rgba(69, 160, 255, .25), transparent 32%),
        radial-gradient(circle at 10% 100%, rgba(34, 197, 150, .12), transparent 35%),
        linear-gradient(120deg, #071d35 0%, #103c64 52%, #1267a5 100%) !important;
}

/* Decorative Dot Pattern */
.page .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image: radial-gradient(
        rgba(255,255,255,.19) 1px,
        transparent 1px
    );

    background-size: 23px 23px;
    opacity: .35;
}

/* Decorative Glow */
.page .hero::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    right: -100px;
    top: -180px;
    z-index: -1;
    border-radius: 50%;
    background: rgba(74, 168, 255, .16);
    filter: blur(45px);
    pointer-events: none;
}

/* Hero Container */
.page .hero > .container {
    position: relative !important;
    z-index: 2;
    width: min(1120px, calc(100% - 40px)) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
}

/* Small Label */
.page .hero .eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    color: #72f0c5 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    margin-bottom: 16px !important;
}

.page .hero .eyebrow::before {
    content: "";
    width: 27px;
    height: 2px;
    background: #35d6a0;
    border-radius: 10px;
}

/* Main Heading - Force White */
.page .hero h1 {
    color: #ffffff !important;
    font-size: clamp(38px, 5vw, 58px) !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -1.5px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    text-shadow: 0 3px 15px rgba(0,0,0,.15);
}

/* Hero Description */
.page .hero p {
    max-width: 760px !important;
    color: #e1edf8 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.9 !important;
    margin: 0 !important;
}

/* =========================================
   CONTENT BACKGROUND - DOT STYLE
========================================= */

.page .content {
    position: relative;
    padding-top: 42px !important;
    padding-bottom: 75px !important;

    background-color: #f5f8fc !important;

    background-image: radial-gradient(
        #d7e3ef 0.8px,
        transparent 0.8px
    );

    background-size: 22px 22px;
}

/* Date Information */
.page .policy-meta {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto 25px !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 30px;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 500;
}

.page .policy-meta strong {
    color: #193c5b !important;
    font-weight: 700;
}

/* =========================================
   WHITE CONTENT CARD
========================================= */

.page .policy-card {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto !important;

    position: relative;
    background: rgba(255,255,255,.97) !important;

    border: 1px solid #e2eaf2 !important;
    border-radius: 18px !important;

    padding: 45px !important;

    box-shadow:
        0 2px 5px rgba(15, 45, 75, .02),
        0 15px 45px rgba(15, 45, 75, .07) !important;
}

/* Section Heading */
.page .policy-card h2 {
    color: #102f4c !important;
    font-size: 21px !important;
    font-weight: 750 !important;
    line-height: 1.4 !important;

    margin: 32px 0 12px !important;
    padding: 0 0 10px !important;

    border-bottom: 1px solid #edf1f5;
}

.page .policy-card h2:first-child {
    margin-top: 0 !important;
}

/* Paragraph */
.page .policy-card p {
    color: #52657a !important;
    font-size: 15px !important;
    line-height: 1.95 !important;
    margin: 10px 0 16px !important;
}

/* Lists */
.page .policy-card ul {
    padding-left: 25px !important;
    margin: 12px 0 22px !important;
}

.page .policy-card li {
    color: #52657a !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
    padding: 4px 0 !important;
}

.page .policy-card li::marker {
    color: #18a878;
}

/* Links */
.page .policy-card a {
    color: #0876bd !important;
    font-weight: 600;
    transition: color .25s ease;
}

.page .policy-card a:hover {
    color: #13a77c !important;
}

/* Important Notice */
.page .notice {
    padding: 22px 24px !important;
    margin: 25px 0 !important;

    color: #31536f !important;
    background: linear-gradient(120deg, #edf7ff, #f4fbff) !important;

    border: 1px solid #d9ebf8 !important;
    border-left: 4px solid #1685c5 !important;
    border-radius: 10px !important;

    font-size: 14px;
    line-height: 1.9;
}

/* Contact Card */
.page .contact-card {
    background: #f7fafc !important;
    border: 1px solid #e3ebf2 !important;
    border-radius: 12px !important;
    padding: 25px !important;

    color: #52657a !important;
    font-size: 15px;
    line-height: 2 !important;
}

.page .contact-card strong {
    color: #102f4c !important;
    font-size: 18px;
}

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

@media (max-width: 768px) {

    .page .hero {
        min-height: 240px !important;
        padding: 48px 0 !important;
    }

    .page .hero h1 {
        font-size: 40px !important;
    }

    .page .hero p {
        font-size: 14px !important;
    }

    .page .content {
        padding-top: 28px !important;
        padding-bottom: 45px !important;
    }

    .page .policy-card {
        padding: 28px 22px !important;
    }

    .page .policy-meta {
        gap: 8px;
        flex-direction: column;
    }
}

@media (max-width: 480px) {

    .page .hero {
        min-height: auto !important;
        padding: 42px 0 !important;
    }

    .page .hero h1 {
        font-size: 34px !important;
        letter-spacing: -1px !important;
    }

    .page .hero .eyebrow {
        font-size: 10px !important;
        letter-spacing: 2px !important;
    }

    .page .policy-card {
        padding: 22px 17px !important;
        border-radius: 12px !important;
    }

    .page .policy-card h2 {
        font-size: 19px !important;
    }

    .page .policy-card p,
    .page .policy-card li {
        font-size: 14px !important;
    }
}