/* ============================================================
    [Master Stylesheet]

    Theme Name:     Consu Hub       
    Theme URL:      http://      
    Description:    Consu Hub - Multipurpose Agency & Business HTML Template 
    Author URL:     https://account.templatemonster.com/store    
    Version:        1.0.0

============================================================== */
/*
========================================
*********** TABLE OF CONTENTS **********

    *****************
01. Type CSS
	*****************
    01.01 Variables css
    01.02 reset css 
    01.03 typography css 
    01.04 extend css
    01.05 preload Css 
    01.06 Scroll to Top

    *****************
02. Home One CSS
	*****************
    02.01 header css
    01.02 navbar css
    01.03 banner css
    02.04 skilled css
    02.05 who-we css
    02.06 why-choose css
    02.07 services css
    02.08 team css
    02.09 project css
    02.10 pricing css
    02.11 client-feedback css
    02.12 blog css
    02.13 contact-info css
    02.14 company logo css 
    02.15 footer css

    *****************
03. Home Two CSS
	*****************
    03.01 header-top css
    03.02 navbar css 
    03.03 banner css
    03.04 who-we css
    03.05 services css
    03.06 your-business css
    03.07 project css
    03.08 pricing css
    03.09 consulting-services css
    03.10 team css
    03.11 client-feedback css
    03.12 blog css
    02.14 company logo css
    03.15 footer  css


    *****************
04. Inner CSS
	*****************
    Breadcrumb css 
    Services Details css 
    all project css 
    blog details css
    contact-us css

========================================
*/
/* ============================
    01.01 Variables css 
================= ==============*/
/* google Font */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/* ======= Color Variables Start ========== */
:root {
  /* Font Family */
  --heading-font: "Fraunces", sans-serif;
  --body-font: "Inter", sans-serif;
  /* ======= Theme Color Start ======== */
  /* Base Color */
  /* hsl(195.62deg 100% 47.45%) */
  --primary-h: 195.62;
  --primary-s: 100%;
  --primary-l: 47.45%;
  --primary: var(--primary-h) var(--primary-s) var(--primary-l);
  --primary-d-100: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.1);
  --primary-d-200: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.2);
  --primary-d-300: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.3);
  --primary-d-400: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.4);
  --primary-d-500: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.5);
  --primary-d-600: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.6);
  --primary-d-700: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.7);
  --primary-d-800: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.8);
  --primary-d-900: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.9);
  --primary-d-1000: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 1);
  --primary-l-100: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1);
  --primary-l-200: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.2);
  --primary-l-300: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.3);
  --primary-l-400: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.4);
  --primary-l-500: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5);
  --primary-l-600: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.6);
  --primary-l-700: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.7);
  --primary-l-800: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.8);
  --primary-l-900: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.9);
  --primary-l-1000: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 1);
  /* Base Two Color */
  --secondary-h: 230;
  --secondary-s: 100%;
  --secondary-l: 18%;
  --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l);
  --secondary-d-100: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.1);
  --secondary-d-200: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.2);
  --secondary-d-300: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.3);
  --secondary-d-400: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.4);
  --secondary-d-500: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.5);
  --secondary-d-600: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.6);
  --secondary-d-700: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.7);
  --secondary-d-800: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.8);
  --secondary-d-900: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.9);
  --secondary-d-1000: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 1);
  --secondary-l-100: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1);
  --secondary-l-200: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.2);
  --secondary-l-300: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.3);
  --secondary-l-400: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.4);
  --secondary-l-500: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5);
  --secondary-l-600: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.6);
  --secondary-l-700: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.7);
  --secondary-l-800: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.8);
  --secondary-l-900: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.9);
  --secondary-l-1000: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 1);
  /* ======== Color Variables Start ========== */
  --white: 0 0% 100%;
  --body-color: 0 0% 80%;
  --heading-color: 230 100% 18%;
  --black: 0 0% 0%;
  --border-color: 0 0% 88%;
  --section-bg: 208 100% 97%;
  --background-color: #f8f8f8;
  /* =========== Box Shadow Start ============ */
  --header-box-shadow: 0px -1px 15px 3px hsl(var(--black) / 0.3);
  --mobile-box-shadow: 0px -1px 5px 0px hsl(var(--black) / 0.92);
  --box-shadow: 0px 2px 15px hsl(var(--black) / 0.05);
  /* =========== Bootstrap Modifier Start ============ */
  /* Primary Color */
  /* hsl(45.5deg 99.17% 52.55%) */
  --primary-h: 45.5;
  --primary-s: 99.17%;
  --primary-l: 52.55%;
  --primary: var(--primary-h) var(--primary-s) var(--primary-l);
  --primary-d-100: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.1);
  --primary-d-200: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.2);
  --primary-d-300: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.3);
  --primary-d-400: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.4);
  --primary-d-500: var(--primary-h) var(--primary-s)
    calc(var(--primary-l) - var(--primary-l) * 0.5);
  --primary-l-100: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1);
  --primary-l-200: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.2);
  --primary-l-300: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.3);
  --primary-l-400: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.4);
  --primary-l-500: var(--primary-h) calc(var(--primary-s))
    calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5);
  /* Secondary Color */
  /* hsl(193.95deg 57.33% 70.59%) */
  --secondary-h: 193.95;
  --secondary-s: 57.33%;
  --secondary-l: 70.59%;
  --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l);
  --secondary-d-100: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.1);
  --secondary-d-200: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.2);
  --secondary-d-300: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.3);
  --secondary-d-400: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.4);
  --secondary-d-500: var(--secondary-h) var(--secondary-s)
    calc(var(--secondary-l) - var(--secondary-l) * 0.5);
  --secondary-l-100: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1);
  --secondary-l-200: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.2);
  --secondary-l-300: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.3);
  --secondary-l-400: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.4);
  --secondary-l-500: var(--secondary-h) calc(var(--secondary-s))
    calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5);
  /* Success Color */
  --success-h: 145;
  --success-s: 63%;
  --success-l: 42%;
  --success: var(--success-h) var(--success-s) var(--success-l);
  --success-d-100: var(--success-h) var(--success-s)
    calc(var(--success-l) - var(--success-l) * 0.1);
  --success-d-200: var(--success-h) var(--success-s)
    calc(var(--success-l) - var(--success-l) * 0.2);
  --success-d-300: var(--success-h) var(--success-s)
    calc(var(--success-l) - var(--success-l) * 0.3);
  --success-d-400: var(--success-h) var(--success-s)
    calc(var(--success-l) - var(--success-l) * 0.4);
  --success-d-500: var(--success-h) var(--success-s)
    calc(var(--success-l) - var(--success-l) * 0.5);
  --success-l-100: var(--success-h) calc(var(--success-s))
    calc(var(--success-l) + (100% - var(--success-l)) * 0.1);
  --success-l-200: var(--success-h) calc(var(--success-s))
    calc(var(--success-l) + (100% - var(--success-l)) * 0.2);
  --success-l-300: var(--success-h) calc(var(--success-s))
    calc(var(--success-l) + (100% - var(--success-l)) * 0.3);
  --success-l-400: var(--success-h) calc(var(--success-s))
    calc(var(--success-l) + (100% - var(--success-l)) * 0.4);
  --success-l-500: var(--success-h) calc(var(--success-s))
    calc(var(--success-l) + (100% - var(--success-l)) * 0.5);
  /* Danger Color */
  --danger-h: 0;
  --danger-s: 96%;
  --danger-l: 63%;
  --danger: var(--danger-h) var(--danger-s) var(--danger-l);
  --danger-d-100: var(--danger-h) var(--danger-s)
    calc(var(--danger-l) - var(--danger-l) * 0.1);
  --danger-d-200: var(--danger-h) var(--danger-s)
    calc(var(--danger-l) - var(--danger-l) * 0.2);
  --danger-d-300: var(--danger-h) var(--danger-s)
    calc(var(--danger-l) - var(--danger-l) * 0.3);
  --danger-d-400: var(--danger-h) var(--danger-s)
    calc(var(--danger-l) - var(--danger-l) * 0.4);
  --danger-d-500: var(--danger-h) var(--danger-s)
    calc(var(--danger-l) - var(--danger-l) * 0.5);
  --danger-l-100: var(--danger-h) calc(var(--danger-s))
    calc(var(--danger-l) + (100% - var(--danger-l)) * 0.1);
  --danger-l-200: var(--danger-h) calc(var(--danger-s))
    calc(var(--danger-l) + (100% - var(--danger-l)) * 0.2);
  --danger-l-300: var(--danger-h) calc(var(--danger-s))
    calc(var(--danger-l) + (100% - var(--danger-l)) * 0.3);
  --danger-l-400: var(--danger-h) calc(var(--danger-s))
    calc(var(--danger-l) + (100% - var(--danger-l)) * 0.4);
  --danger-l-500: var(--danger-h) calc(var(--danger-s))
    calc(var(--danger-l) + (100% - var(--danger-l)) * 0.5);
  /* Warning Color */
  --warning-h: 45;
  --warning-s: 74%;
  --warning-l: 56%;
  --warning: var(--warning-h) var(--warning-s) var(--warning-l);
  --warning-d-100: var(--warning-h) var(--warning-s)
    calc(var(--warning-l) - var(--warning-l) * 0.1);
  --warning-d-200: var(--warning-h) var(--warning-s)
    calc(var(--warning-l) - var(--warning-l) * 0.2);
  --warning-d-300: var(--warning-h) var(--warning-s)
    calc(var(--warning-l) - var(--warning-l) * 0.3);
  --warning-d-400: var(--warning-h) var(--warning-s)
    calc(var(--warning-l) - var(--warning-l) * 0.4);
  --warning-d-500: var(--warning-h) var(--warning-s)
    calc(var(--warning-l) - var(--warning-l) * 0.5);
  --warning-l-100: var(--warning-h) calc(var(--warning-s))
    calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1);
  --warning-l-200: var(--warning-h) calc(var(--warning-s))
    calc(var(--warning-l) + (100% - var(--warning-l)) * 0.2);
  --warning-l-300: var(--warning-h) calc(var(--warning-s))
    calc(var(--warning-l) + (100% - var(--warning-l)) * 0.3);
  --warning-l-400: var(--warning-h) calc(var(--warning-s))
    calc(var(--warning-l) + (100% - var(--warning-l)) * 0.4);
  --warning-l-500: var(--warning-h) calc(var(--warning-s))
    calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5);
  /* Info Color */
  --info-h: 219;
  --info-s: 98%;
  --info-l: 43%;
  --info: var(--info-h) var(--info-s) var(--info-l);
  --info-d-100: var(--info-h) var(--info-s)
    calc(var(--info-l) - var(--info-l) * 0.1);
  --info-d-200: var(--info-h) var(--info-s)
    calc(var(--info-l) - var(--info-l) * 0.2);
  --info-d-300: var(--info-h) var(--info-s)
    calc(var(--info-l) - var(--info-l) * 0.3);
  --info-d-400: var(--info-h) var(--info-s)
    calc(var(--info-l) - var(--info-l) * 0.4);
  --info-d-500: var(--info-h) var(--info-s)
    calc(var(--info-l) - var(--info-l) * 0.5);
  --info-l-100: var(--info-h) calc(var(--info-s))
    calc(var(--info-l) + (100% - var(--info-l)) * 0.1);
  --info-l-200: var(--info-h) calc(var(--info-s))
    calc(var(--info-l) + (100% - var(--info-l)) * 0.2);
  --info-l-300: var(--info-h) calc(var(--info-s))
    calc(var(--info-l) + (100% - var(--info-l)) * 0.3);
  --info-l-400: var(--info-h) calc(var(--info-s))
    calc(var(--info-l) + (100% - var(--info-l)) * 0.4);
  --info-l-500: var(--info-h) calc(var(--info-s))
    calc(var(--info-l) + (100% - var(--info-l)) * 0.5);
  --error-h: 0;
  --error-s: 79%;
  --error-l: 63%;
  --error: var(--error-h) var(--error-s) var(--error-l);
  --error-d-100: var(--error-h) var(--error-s)
    calc(var(--error-l) - var(--error-l) * 0.1);
  --error-d-200: var(--error-h) var(--error-s)
    calc(var(--error-l) - var(--error-l) * 0.2);
  --error-d-300: var(--error-h) var(--error-s)
    calc(var(--error-l) - var(--error-l) * 0.3);
  --error-d-400: var(--error-h) var(--error-s)
    calc(var(--error-l) - var(--error-l) * 0.4);
  --error-d-500: var(--error-h) var(--error-s)
    calc(var(--error-l) - var(--error-l) * 0.5);
  --error-l-100: var(--error-h) calc(var(--error-s))
    calc(var(--error-l) + (100% - var(--error-l)) * 0.1);
  --error-l-200: var(--error-h) calc(var(--error-s))
    calc(var(--error-l) + (100% - var(--error-l)) * 0.2);
  --error-l-300: var(--error-h) calc(var(--error-s))
    calc(var(--error-l) + (100% - var(--error-l)) * 0.3);
  --error-l-400: var(--error-h) calc(var(--error-s))
    calc(var(--error-l) + (100% - var(--error-l)) * 0.4);
  --error-l-500: var(--error-h) calc(var(--error-s))
    calc(var(--error-l) + (100% - var(--error-l)) * 0.5);
  --black2-h: 0;
  --black2-s: 0%;
  --black2-l: 11%;
  --black2: var(--black2-h) var(--black2-s) var(--black2-l);
  --black2-d-100: var(--black2-h) var(--black2-s)
    calc(var(--black2-l) - var(--black2-l) * 0.1);
  --black2-d-200: var(--black2-h) var(--black2-s)
    calc(var(--black2-l) - var(--black2-l) * 0.2);
  --black2-d-300: var(--black2-h) var(--black2-s)
    calc(var(--black2-l) - var(--black2-l) * 0.3);
  --black2-d-400: var(--black2-h) var(--black2-s)
    calc(var(--black2-l) - var(--black2-l) * 0.4);
  --black2-d-500: var(--black2-h) var(--black2-s)
    calc(var(--black2-l) - var(--black2-l) * 0.5);
  --black2-l-100: var(--black2-h) calc(var(--black2-s))
    calc(var(--black2-l) + (100% - var(--black2-l)) * 0.1);
  --black2-l-200: var(--black2-h) calc(var(--black2-s))
    calc(var(--black2-l) + (100% - var(--black2-l)) * 0.2);
  --black2-l-300: var(--black2-h) calc(var(--black2-s))
    calc(var(--black2-l) + (100% - var(--black2-l)) * 0.3);
  --black2-l-400: var(--black2-h) calc(var(--black2-s))
    calc(var(--black2-l) + (100% - var(--black2-l)) * 0.4);
  --black2-l-500: var(--black2-h) calc(var(--black2-s))
    calc(var(--black2-l) + (100% - var(--black2-l)) * 0.5);
  --black3-h: 0;
  --black3-s: 0%;
  --black3-l: 16%;
  --black3: var(--black3-h) var(--black3-s) var(--black3-l);
  --black3-d-100: var(--black3-h) var(--black3-s)
    calc(var(--black3-l) - var(--black3-l) * 0.1);
  --black3-d-200: var(--black3-h) var(--black3-s)
    calc(var(--black3-l) - var(--black3-l) * 0.2);
  --black3-d-300: var(--black3-h) var(--black3-s)
    calc(var(--black3-l) - var(--black3-l) * 0.3);
  --black3-d-400: var(--black3-h) var(--black3-s)
    calc(var(--black3-l) - var(--black3-l) * 0.4);
  --black3-d-500: var(--black3-h) var(--black3-s)
    calc(var(--black3-l) - var(--black3-l) * 0.5);
  --black3-l-100: var(--black3-h) calc(var(--black3-s))
    calc(var(--black3-l) + (100% - var(--black3-l)) * 0.1);
  --black3-l-200: var(--black3-h) calc(var(--black3-s))
    calc(var(--black3-l) + (100% - var(--black3-l)) * 0.2);
  --black3-l-300: var(--black3-h) calc(var(--black3-s))
    calc(var(--black3-l) + (100% - var(--black3-l)) * 0.3);
  --black3-l-400: var(--black3-h) calc(var(--black3-s))
    calc(var(--black3-l) + (100% - var(--black3-l)) * 0.4);
  --black3-l-500: var(--black3-h) calc(var(--black3-s))
    calc(var(--black3-l) + (100% - var(--black3-l)) * 0.5);
  --gray-h: 0;
  --gray-s: 0%;
  --gray-l: 20%;
  --gray: var(--gray-h) var(--gray-s) var(--gray-l);
  --gray-d-100: var(--gray-h) var(--gray-s)
    calc(var(--gray-l) - var(--gray-l) * 0.1);
  --gray-d-200: var(--gray-h) var(--gray-s)
    calc(var(--gray-l) - var(--gray-l) * 0.2);
  --gray-d-300: var(--gray-h) var(--gray-s)
    calc(var(--gray-l) - var(--gray-l) * 0.3);
  --gray-d-400: var(--gray-h) var(--gray-s)
    calc(var(--gray-l) - var(--gray-l) * 0.4);
  --gray-d-500: var(--gray-h) var(--gray-s)
    calc(var(--gray-l) - var(--gray-l) * 0.5);
  --gray-l-100: var(--gray-h) calc(var(--gray-s))
    calc(var(--gray-l) + (100% - var(--gray-l)) * 0.1);
  --gray-l-200: var(--gray-h) calc(var(--gray-s))
    calc(var(--gray-l) + (100% - var(--gray-l)) * 0.2);
  --gray-l-300: var(--gray-h) calc(var(--gray-s))
    calc(var(--gray-l) + (100% - var(--gray-l)) * 0.3);
  --gray-l-400: var(--gray-h) calc(var(--gray-s))
    calc(var(--gray-l) + (100% - var(--gray-l)) * 0.4);
  --gray-l-500: var(--gray-h) calc(var(--gray-s))
    calc(var(--gray-l) + (100% - var(--gray-l)) * 0.5);
  --gray2-h: 0;
  --gray2-s: 0%;
  --gray2-l: 31%;
  --gray2: var(--gray2-h) var(--gray2-s) var(--gray2-l);
  --gray2-d-100: var(--gray2-h) var(--gray2-s)
    calc(var(--gray2-l) - var(--gray2-l) * 0.1);
  --gray2-d-200: var(--gray2-h) var(--gray2-s)
    calc(var(--gray2-l) - var(--gray2-l) * 0.2);
  --gray2-d-300: var(--gray2-h) var(--gray2-s)
    calc(var(--gray2-l) - var(--gray2-l) * 0.3);
  --gray2-d-400: var(--gray2-h) var(--gray2-s)
    calc(var(--gray2-l) - var(--gray2-l) * 0.4);
  --gray2-d-500: var(--gray2-h) var(--gray2-s)
    calc(var(--gray2-l) - var(--gray2-l) * 0.5);
  --gray2-l-100: var(--gray2-h) calc(var(--gray2-s))
    calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.1);
  --gray2-l-200: var(--gray2-h) calc(var(--gray2-s))
    calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.2);
  --gray2-l-300: var(--gray2-h) calc(var(--gray2-s))
    calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.3);
  --gray2-l-400: var(--gray2-h) calc(var(--gray2-s))
    calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.4);
  --gray2-l-500: var(--gray2-h) calc(var(--gray2-s))
    calc(var(--gray2-l) + (100% - var(--gray2-l)) * 0.5);
  --gray3-h: 0;
  --gray3-s: 0%;
  --gray3-l: 51%;
  --gray3: var(--gray3-h) var(--gray3-s) var(--gray3-l);
  --gray3-d-100: var(--gray3-h) var(--gray3-s)
    calc(var(--gray3-l) - var(--gray3-l) * 0.1);
  --gray3-d-200: var(--gray3-h) var(--gray3-s)
    calc(var(--gray3-l) - var(--gray3-l) * 0.2);
  --gray3-d-300: var(--gray3-h) var(--gray3-s)
    calc(var(--gray3-l) - var(--gray3-l) * 0.3);
  --gray3-d-400: var(--gray3-h) var(--gray3-s)
    calc(var(--gray3-l) - var(--gray3-l) * 0.4);
  --gray3-d-500: var(--gray3-h) var(--gray3-s)
    calc(var(--gray3-l) - var(--gray3-l) * 0.5);
  --gray3-l-100: var(--gray3-h) calc(var(--gray3-s))
    calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.1);
  --gray3-l-200: var(--gray3-h) calc(var(--gray3-s))
    calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.2);
  --gray3-l-300: var(--gray3-h) calc(var(--gray3-s))
    calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.3);
  --gray3-l-400: var(--gray3-h) calc(var(--gray3-s))
    calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.4);
  --gray3-l-500: var(--gray3-h) calc(var(--gray3-s))
    calc(var(--gray3-l) + (100% - var(--gray3-l)) * 0.5);
  --gray4-h: 0;
  --gray4-s: 0%;
  --gray4-l: 74%;
  --gray4: var(--gray4-h) var(--gray4-s) var(--gray4-l);
  --gray4-d-100: var(--gray4-h) var(--gray4-s)
    calc(var(--gray4-l) - var(--gray4-l) * 0.1);
  --gray4-d-200: var(--gray4-h) var(--gray4-s)
    calc(var(--gray4-l) - var(--gray4-l) * 0.2);
  --gray4-d-300: var(--gray4-h) var(--gray4-s)
    calc(var(--gray4-l) - var(--gray4-l) * 0.3);
  --gray4-d-400: var(--gray4-h) var(--gray4-s)
    calc(var(--gray4-l) - var(--gray4-l) * 0.4);
  --gray4-d-500: var(--gray4-h) var(--gray4-s)
    calc(var(--gray4-l) - var(--gray4-l) * 0.5);
  --gray4-l-100: var(--gray4-h) calc(var(--gray4-s))
    calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.1);
  --gray4-l-200: var(--gray4-h) calc(var(--gray4-s))
    calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.2);
  --gray4-l-300: var(--gray4-h) calc(var(--gray4-s))
    calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.3);
  --gray4-l-400: var(--gray4-h) calc(var(--gray4-s))
    calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.4);
  --gray4-l-500: var(--gray4-h) calc(var(--gray4-s))
    calc(var(--gray4-l) + (100% - var(--gray4-l)) * 0.5);
  --gray5-h: 0;
  --gray5-s: 0%;
  --gray5-l: 88%;
  --gray5: var(--gray5-h) var(--gray5-s) var(--gray5-l);
  --gray5-d-100: var(--gray5-h) var(--gray5-s)
    calc(var(--gray5-l) - var(--gray5-l) * 0.1);
  --gray5-d-200: var(--gray5-h) var(--gray5-s)
    calc(var(--gray5-l) - var(--gray5-l) * 0.2);
  --gray5-d-300: var(--gray5-h) var(--gray5-s)
    calc(var(--gray5-l) - var(--gray5-l) * 0.3);
  --gray5-d-400: var(--gray5-h) var(--gray5-s)
    calc(var(--gray5-l) - var(--gray5-l) * 0.4);
  --gray5-d-500: var(--gray5-h) var(--gray5-s)
    calc(var(--gray5-l) - var(--gray5-l) * 0.5);
  --gray5-l-100: var(--gray5-h) calc(var(--gray5-s))
    calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.1);
  --gray5-l-200: var(--gray5-h) calc(var(--gray5-s))
    calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.2);
  --gray5-l-300: var(--gray5-h) calc(var(--gray5-s))
    calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.3);
  --gray5-l-400: var(--gray5-h) calc(var(--gray5-s))
    calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.4);
  --gray5-l-500: var(--gray5-h) calc(var(--gray5-s))
    calc(var(--gray5-l) + (100% - var(--gray5-l)) * 0.5);
  --paragraph-h: 0;
  --paragraph-s: 0%;
  --paragraph-l: 51%;
  --paragraph: var(--paragraph-h) var(--paragraph-s) var(--paragraph-l);
  --paragraph-d-100: var(--paragraph-h) var(--paragraph-s)
    calc(var(--paragraph-l) - var(--paragraph-l) * 0.1);
  --paragraph-d-200: var(--paragraph-h) var(--paragraph-s)
    calc(var(--paragraph-l) - var(--paragraph-l) * 0.2);
  --paragraph-d-300: var(--paragraph-h) var(--paragraph-s)
    calc(var(--paragraph-l) - var(--paragraph-l) * 0.3);
  --paragraph-d-400: var(--paragraph-h) var(--paragraph-s)
    calc(var(--paragraph-l) - var(--paragraph-l) * 0.4);
  --paragraph-d-500: var(--paragraph-h) var(--paragraph-s)
    calc(var(--paragraph-l) - var(--paragraph-l) * 0.5);
  --paragraph-l-100: var(--paragraph-h) calc(var(--paragraph-s))
    calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.1);
  --paragraph-l-200: var(--paragraph-h) calc(var(--paragraph-s))
    calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.2);
  --paragraph-l-300: var(--paragraph-h) calc(var(--paragraph-s))
    calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.3);
  --paragraph-l-400: var(--paragraph-h) calc(var(--paragraph-s))
    calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.4);
  --paragraph-l-500: var(--paragraph-h) calc(var(--paragraph-s))
    calc(var(--paragraph-l) + (100% - var(--paragraph-l)) * 0.5);

  /* hsl(195.62deg 100% 47.45%) */
  --first-header-color-h: 195.62;
  --first-header-color-s: 100%;
  --first-header-color-l: 47.45%;
  --first-header-color: var(--first-header-color-h) var(--first-header-color-s)
    var(--first-header-color-l);

  /* hsl(44, 100%, 50%) */
  --two-header-color-h: 44;
  --two-header-color-s: 100%;
  --two-header-color-l: 50%;
  --two-header-color: var(--two-header-color-h) var(--two-header-color-s)
    var(--two-header-color-l);
  --two-header-color-d-100: var(--two-header-color-h) var(--two-header-color-s)
    calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.1);
  --two-header-color-d-200: var(--two-header-color-h) var(--two-header-color-s)
    calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.2);
  --two-header-color-d-300: var(--two-header-color-h) var(--two-header-color-s)
    calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.3);
  --two-header-color-d-400: var(--two-header-color-h) var(--two-header-color-s)
    calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.4);
  --two-header-color-d-500: var(--two-header-color-h) var(--two-header-color-s)
    calc(var(--two-header-color-l) - var(--two-header-color-l) * 0.5);
  --two-header-color-l-100: var(--two-header-color-h)
    calc(var(--two-header-color-s))
    calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.1);
  --two-header-color-l-200: var(--two-header-color-h)
    calc(var(--two-header-color-s))
    calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.2);
  --two-header-color-l-300: var(--two-header-color-h)
    calc(var(--two-header-color-s))
    calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.3);
  --two-header-color-l-400: var(--two-header-color-h)
    calc(var(--two-header-color-s))
    calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.4);
  --two-header-color-l-500: var(--two-header-color-h)
    calc(var(--two-header-color-s))
    calc(var(--two-header-color-l) + (100% - var(--two-header-color-l)) * 0.5);
  --two-section-h: 203;
  --two-section-s: 73%;
  --two-section-l: 12%;
  --two-section: var(--two-section-h) var(--two-section-s) var(--two-section-l);
  --two-section-d-100: var(--two-section-h) var(--two-section-s)
    calc(var(--two-section-l) - var(--two-section-l) * 0.1);
  --two-section-d-200: var(--two-section-h) var(--two-section-s)
    calc(var(--two-section-l) - var(--two-section-l) * 0.2);
  --two-section-d-300: var(--two-section-h) var(--two-section-s)
    calc(var(--two-section-l) - var(--two-section-l) * 0.3);
  --two-section-d-400: var(--two-section-h) var(--two-section-s)
    calc(var(--two-section-l) - var(--two-section-l) * 0.4);
  --two-section-d-500: var(--two-section-h) var(--two-section-s)
    calc(var(--two-section-l) - var(--two-section-l) * 0.5);
  --two-section-l-100: var(--two-section-h) calc(var(--two-section-s))
    calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.1);
  --two-section-l-200: var(--two-section-h) calc(var(--two-section-s))
    calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.2);
  --two-section-l-300: var(--two-section-h) calc(var(--two-section-s))
    calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.3);
  --two-section-l-400: var(--two-section-h) calc(var(--two-section-s))
    calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.4);
  --two-section-l-500: var(--two-section-h) calc(var(--two-section-s))
    calc(var(--two-section-l) + (100% - var(--two-section-l)) * 0.5);
}

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

.secondary-text {
  color: hsl(var(--secondary));
}

.info-text {
  color: hsl(var(--info));
}

.warning-text {
  color: hsl(var(--warning));
}

.error-text {
  color: hsl(var(--error));
}

.black-text {
  color: hsl(var(--black));
}

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

.gray-text {
  color: hsl(var(--gray));
}

.gray3-text {
  color: hsl(var(--gray3));
}

/* ============================
    01.02 reset css 
=============================== */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

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

html:focus-within {
  scroll-behavior: smooth;
}

a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

button,
a {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
}

img,
picture,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    -webkit-transition: none;
    transition: none;
  }
}

body,
html {
  height: 100%;
  scroll-behavior: smooth;
}

body::-webkit-scrollbar-track,
html::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: hsl(var(--white));
}

body::-webkit-scrollbar,
html::-webkit-scrollbar {
  width: 8px;
  background-color: hsl(var(--white));
}

body::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-thumb {
  background-color: hsl(var(--primary));
  border-radius: 10px;
}

/* ============================
    01.03 typography css 
=============================== */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: var(--body-font);
  color: hsl(var(--body-color));
  word-break: break-word;
  background-color: var(--background-color);
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-x: hidden;
}

main.wraper {
  /* overflow-x: hidden; */
}

p {
  font-size: 1rem;
  font-weight: 200;
  margin: 0;
  color: hsl(var(--body-color));
  font-weight: 400;
}

span {
  display: inline-block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  color: #082334;
  line-height: 1.3;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0 0 15px 0;
  }
}

h1 {
  font-size: 3.75rem;
}

@media screen and (max-width: 1399px) {
  h1 {
    font-size: 3.125rem;
  }
}

@media screen and (max-width: 1199px) {
  h1 {
    font-size: 2.8125rem;
  }
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 767px) {
  h1 {
    font-size: 2.1875rem;
  }
}

@media screen and (max-width: 575px) {
  h1 {
    font-size: 1.875rem;
  }
}

h2 {
  font-size: 2.5rem;
}

@media screen and (max-width: 1399px) {
  h2 {
    font-size: 2.8125rem;
  }
}

@media screen and (max-width: 1199px) {
  h2 {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 991px) {
  h2 {
    font-size: 2.1875rem;
  }
}

@media screen and (max-width: 767px) {
  h2 {
    font-size: 1.875rem;
  }
}

@media screen and (max-width: 575px) {
  h2 {
    font-size: 1.5625rem;
  }
}

h3 {
  font-size: 1.875rem;
}

@media screen and (max-width: 1399px) {
  h3 {
    font-size: 1.75rem;
  }
}

@media screen and (max-width: 1199px) {
  h3 {
    font-size: 1.5625rem;
  }
}

@media screen and (max-width: 991px) {
  h3 {
    font-size: 1.4375rem;
  }
}

@media screen and (max-width: 767px) {
  h3 {
    font-size: 1.375rem;
  }
}

@media screen and (max-width: 575px) {
  h3 {
    font-size: 1.25rem;
  }
}

h4 {
  font-size: 1.5rem;
}

@media screen and (max-width: 1399px) {
  h4 {
    font-size: 1.3125rem;
  }
}

@media screen and (max-width: 1199px) {
  h4 {
    font-size: 1.25rem;
  }
}

@media screen and (max-width: 991px) {
  h4 {
    font-size: 1.1875rem;
  }
}

@media screen and (max-width: 767px) {
  h4 {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 575px) {
  h4 {
    font-size: 1.0625rem;
  }
}

h5 {
  font-size: 1.25rem;
}

@media screen and (max-width: 1399px) {
  h5 {
    font-size: 1.1875rem;
  }
}

@media screen and (max-width: 1199px) {
  h5 {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 991px) {
  h5 {
    font-size: 1.0625rem;
  }
}

@media screen and (max-width: 767px) {
  h5 {
    font-size: 1rem;
  }
}

@media screen and (max-width: 575px) {
  h5 {
    font-size: 1rem;
  }
}

h6 {
  font-size: 1rem;
}

@media screen and (max-width: 1399px) {
  h6 {
    font-size: 1rem;
  }
}

@media screen and (max-width: 1199px) {
  h6 {
    font-size: 0.9375rem;
  }
}

@media screen and (max-width: 991px) {
  h6 {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 767px) {
  h6 {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 575px) {
  h6 {
    font-size: 0.875rem;
  }
}

p {
  color: hsl(var(--paragraph));
}

h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
  line-height: inherit;
}

a {
  display: inline-block;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
  text-decoration: none;
  color: #0c2b47;
}

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

img {
  max-width: 100%;
  height: auto;
}

select {
  cursor: pointer;
}

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

button {
  border: 0;
  background-color: transparent;
}

button:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-select:focus {
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/* ============================
    01.04 extend css 
=============================== */
/* ======== Font Size For responsive devices Start ======== */
.fs-10 {
  font-size: 0.625rem;
}

.fs-11 {
  font-size: 0.6875rem;
}

.fs-12 {
  font-size: 0.75rem;
}

.fs-13 {
  font-size: 0.8125rem;
}

.fs-14 {
  font-size: 0.875rem;
}

.fs-15 {
  font-size: 0.9375rem;
}

.fs-16 {
  font-size: 1rem;
}

@media screen and (max-width: 1199px) {
  .fs-16 {
    font-size: 0.9375rem;
  }
}

.fs-17 {
  font-size: 1.0625rem;
}

@media screen and (max-width: 1199px) {
  .fs-17 {
    font-size: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-17 {
    font-size: 0.9375rem;
  }
}

.fs-18 {
  font-size: 1.125rem;
}

@media screen and (max-width: 1399px) {
  .fs-18 {
    font-size: 1.0625rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-18 {
    font-size: 1rem;
  }
}

.fs-20 {
  font-size: 1.25rem;
}

@media screen and (max-width: 1399px) {
  .fs-20 {
    font-size: 1.125rem;
  }
}

@media screen and (max-width: 767px) {
  .fs-20 {
    font-size: 1.0625rem;
  }
}

.section-title h2,
.section-title .h2 {
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 700;
}

@media screen and (max-width: 1199px) {
  .section-title h2,
  .section-title .h2 {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 991px) {
  .section-title h2,
  .section-title .h2 {
    font-size: 2.1875rem;
  }
}

@media screen and (max-width: 767px) {
  .section-title h2,
  .section-title .h2 {
    font-size: 1.875rem;
  }
}

@media screen and (max-width: 575px) {
  .section-title h2,
  .section-title .h2 {
    font-size: 1.5625rem;
  }
}

.section-title span {
  padding-bottom: 15px;
}

.section-title-two h2,
.section-title-two .h2 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 20px 0;
}

@media (max-width: 767.98px) {
  .section-title-two h2,
  .section-title-two .h2 {
    font-size: 1.875rem;
  }
}

.section-title-two p {
  max-width: 528px;
}

hr {
  color: var(--gray5);
  margin: 24px 0;
}

.circle-log-white {
  background: hsl(var(--white));
  border-radius: 100%;
  padding: 10px;
}

.circle-log-primary {
  background: hsl(var(--primary));
  border-radius: 100%;
  padding: 10px;
}

.circle-log-primary p {
  color: hsl(var(--white));
}

.logo__subs__label {
  width: 11.875rem;
  height: 11.875rem;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.logo__subs__label > div {
  width: 8.125rem;
  height: 8.125rem;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 2px solid hsl(var(--border-color));
}

.logo__subs__label > div img {
  width: 4.375rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.logo__subs__label > div .logo__circle__text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: hsl(var(--heading-color));
  font-size: 0.9375rem;
  font-weight: 400;
  -webkit-animation: textRotation 8s linear infinite;
  animation: textRotation 8s linear infinite;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.logo__subs__label > div .logo__circle__text div {
  position: absolute;
  left: 50%;
  font-size: 0.9375rem;
  -webkit-transform-origin: 0 5.9375rem;
  transform-origin: 0 5.9375rem;
}

@-webkit-keyframes textRotation {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes textRotation {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.logo__subs__title {
  margin-bottom: 4.375rem;
  text-align: center;
}

.logo__subs__title h2 {
  margin-bottom: 0;
  font-size: 6rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 7.1875rem;
}

.logo__subs__title h2 span {
  display: block;
  font-weight: 300;
}

.logo__subs__form {
  position: relative;
  z-index: 1;
  width: 23.4375rem;
  height: 4.375rem;
  margin-left: auto;
  margin-right: auto;
}

.logo__subs__form input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 1.9375rem;
  font-weight: 400;
  color: hsl(var(--heading-color));
  border-bottom: 0.125rem solid hsl(var(--heading-color));
  padding-right: 3.75rem;
  font-family: "ClashDisplay-Variable";
}

.logo__subs__form input::-webkit-input-placeholder {
  color: hsl(var(--heading-color) / 0.5);
}

.logo__subs__form input::-moz-placeholder {
  color: hsl(var(--heading-color) / 0.5);
}

.logo__subs__form input:-ms-input-placeholder {
  color: hsl(var(--heading-color) / 0.5);
}

.logo__subs__form input::-ms-input-placeholder {
  color: hsl(var(--heading-color) / 0.5);
}

.logo__subs__form input::placeholder {
  color: hsl(var(--heading-color) / 0.5);
}

.logo__subs__form button {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
  background-color: transparent;
  border: none;
  outline: none;
  color: hsl(var(--heading-color));
  font-size: 2.375rem;
}

.logo__subs__form button i {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.logo__subs__form button:hover {
  color: hsl(var(--primary));
}

.logo__subs__form button:hover i {
  -webkit-transform: rotate(-45deg) translate(0.375rem, 0.1875rem);
  transform: rotate(-45deg) translate(0.375rem, 0.1875rem);
}

.modal .btn-close {
  position: absolute;
  right: 40px;
  top: 20px;
  opacity: 1;
  color: hsl(var(--black));
  background: hsl(var(--white)) var(--bs-btn-close-bg) center/1em auto no-repeat;
  padding: 15px;
  z-index: 1;
}

@media (max-width: 767.98px) {
  .modal .btn-close {
    right: 0;
    top: 0;
  }
}

@media (max-width: 575.98px) {
  .modal .btn-close {
    position: relative;
  }
}

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

.image-effect::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: 1;
}

.image-effect:hover::after {
  height: 250%;
  -webkit-transition: all 600ms linear;
  transition: all 600ms linear;
  background-color: transparent;
}

.image-effect:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.image-effect img {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.booking-form label {
  font-size: 16px;
  font-weight: 600;
  color: #0c2b47;
}

.booking-form input[type="time"],
.booking-form input[type="date"] {
  padding: 10px 5px 10px 12px;
}

.booking-form input,
.booking-form .nice-select,
.booking-form textarea {
  width: 100%;
  padding: 0 20px;
  font-size: 1rem;
  height: 50px;
  line-height: 48px;
  color: hsl(var(--gray3));
  font-size: 16px;
}

.booking-form input::-webkit-input-placeholder,
.booking-form .nice-select::-webkit-input-placeholder,
.booking-form textarea::-webkit-input-placeholder {
  color: hsl(var(--gray4));
}

.booking-form input::-moz-placeholder,
.booking-form .nice-select::-moz-placeholder,
.booking-form textarea::-moz-placeholder {
  color: hsl(var(--gray4));
}

.booking-form input:-ms-input-placeholder,
.booking-form .nice-select:-ms-input-placeholder,
.booking-form textarea:-ms-input-placeholder {
  color: hsl(var(--gray4));
}

.booking-form input::-ms-input-placeholder,
.booking-form .nice-select::-ms-input-placeholder,
.booking-form textarea::-ms-input-placeholder {
  color: hsl(var(--gray4));
}

.booking-form input::placeholder,
.booking-form .nice-select::placeholder,
.booking-form textarea::placeholder {
  color: hsl(var(--gray4));
}

.booking-form input:focus,
.booking-form .nice-select:focus,
.booking-form textarea:focus {
  border-bottom-color: hsl(var(--primary));
}

.booking-form textarea {
  padding: 20px;
  height: 110px;
  line-height: 1.3;
}

.booking-form .nice-select:after {
  height: 8px;
  width: 8px;
}

.booking-form button {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--white));
  background: hsl(var(--primary));
  color: hsl(var(--white));
  width: 100%;
}

.booking-form button:hover {
  background-color: transparent;
  color: hsl(var(--white));
}

.booking-form button:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.booking-form button::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: #0c2b47;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.modal-search-box .s__box {
  position: relative;
}

.modal-search-box input[type="text"] {
  padding: 15px 20px;
  padding-right: 40px;
  font-size: 1rem;
  height: 50px;
  line-height: 48px;
  color: hsl(var(--gray3));
  font-size: 16px;
  border-radius: 5px;
}

.modal-search-box input[type="text"]:focus {
  border-bottom-color: hsl(var(--primary));
}

.modal-search-box button {
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: hsl(var(--gray3));
}

.search-quick-list {
  margin-top: 20px;
}

.search-quick-list ul {
  display: grid;
  margin: 5px 10px;
}

.search-quick-list ul li a {
  font-size: 16px;
  color: hsl(var(--gray2));
  display: block;
  padding: 5px 10px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.search-quick-list ul li a:hover {
  color: hsl(var(--primary));
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}

.modal-backdrop {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.show {
  opacity: 1;
}

/* ========= Background Color Css ======== */
.bg--base {
  background-color: hsl(var(--base)) !important;
}

.bg--primary {
  background-color: hsl(var(--primary)) !important;
}

.bg--secondary {
  background-color: #0c2b47 !important;
}

.bg--success {
  background-color: hsl(var(--success)) !important;
}

.bg--danger {
  background-color: hsl(var(--danger)) !important;
}

.bg--warning {
  background-color: hsl(var(--warning)) !important;
}

.bg--info {
  background-color: hsl(var(--info)) !important;
}

/* =========== Color Css Start =========== */
.text--base {
  color: hsl(var(--base)) !important;
}

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

.text--secondary {
  color: #0c2b47 !important;
}

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

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

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

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

/* ===========  margin Css  ======== */
.my-120 {
  margin-top: 60px;
  margin-bottom: 60px;
}

@media (min-width: 576px) {
  .my-120 {
    margin-top: 80px;
    margin-bottom: 80px;
  }
}

@media (min-width: 992px) {
  .my-120 {
    margin-top: 120px;
    margin-bottom: 120px;
  }
}

.mt-120 {
  margin-top: 60px;
}

@media (min-width: 576px) {
  .mt-120 {
    margin-top: 80px;
  }
}

@media (min-width: 992px) {
  .mt-120 {
    margin-top: 120px;
  }
}

.mb-120 {
  margin-bottom: 60px;
}

@media (min-width: 576px) {
  .mb-120 {
    margin-bottom: 80px;
  }
}

@media (min-width: 992px) {
  .mb-120 {
    margin-bottom: 120px;
  }
}

.my-60 {
  margin-top: 30px;
  margin-bottom: 30px;
}

@media (min-width: 576px) {
  .my-60 {
    margin-top: 40px;
    margin-bottom: 40px;
  }
}

@media (min-width: 992px) {
  .my-60 {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

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

@media (min-width: 576px) {
  .mt-60 {
    margin-top: 40px;
  }
}

@media (min-width: 992px) {
  .mt-60 {
    margin-top: 60px;
  }
}

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

@media (min-width: 576px) {
  .mb-60 {
    margin-bottom: 40px;
  }
}

@media (min-width: 992px) {
  .mb-60 {
    margin-bottom: 60px;
  }
}
/* =============  padding Css  ========== */
.py-120 {
  padding-top: 60px;
  padding-bottom: 60px;
}

@media (min-width: 576px) {
  .py-120 {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

@media (min-width: 992px) {
  .py-120 {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.pt-120 {
  padding-top: 60px;
}

@media (min-width: 576px) {
  .pt-120 {
    padding-top: 80px;
  }
}

@media (min-width: 992px) {
  .pt-120 {
    padding-top: 120px;
  }
}

.pb-120 {
  padding-bottom: 60px;
}

@media (min-width: 576px) {
  .pb-120 {
    padding-bottom: 80px;
  }
}

@media (min-width: 992px) {
  .pb-120 {
    padding-bottom: 120px;
  }
}

.py-60 {
  padding-top: 30px;
  padding-bottom: 30px;
}

@media (min-width: 576px) {
  .py-60 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (min-width: 992px) {
  .py-60 {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.pt-60 {
  padding-top: 30px;
}

@media (min-width: 576px) {
  .pt-60 {
    padding-top: 40px;
  }
}

@media (min-width: 992px) {
  .pt-60 {
    padding-top: 60px;
  }
}

.pb-60 {
  padding-bottom: 30px;
}

@media (min-width: 576px) {
  .pb-60 {
    padding-bottom: 40px;
  }
}

@media (min-width: 992px) {
  .pb-60 {
    padding-bottom: 60px;
  }
}
/* ================================= padding Css End =========================== */
/* ========== Border Color Css ========== */
.border--base {
  border-color: hsl(var(--base)) !important;
}

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

.border--secondary {
  border-color: #0c2b47 !important;
}

.border--success {
  border-color: hsl(var(--success)) !important;
}

.border--danger {
  border-color: hsl(var(--danger)) !important;
}

.border--warning {
  border-color: hsl(var(--warning)) !important;
}

.border--info {
  border-color: hsl(var(--info)) !important;
}

/* Style the cursor elements */
.cursor,
.cursor-trail {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.cursor {
  width: 4px;
  height: 4px;
  background-color: #0c2b47;
}

.cursor-trail {
  width: 35px;
  height: 35px;
  background-color: rgba(0, 15, 92, 0.3);
}

/* ================================= preload Css End ===========================  */
/* Preloader container styling */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: hsl(var(--black) / 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* Logo animation styling */
#preloader img {
  width: 100px;
  /* Adjust size as needed */
  -webkit-animation: pulse 1.5s ease-in-out infinite,
    fade 1.5s ease-in-out infinite alternate;
  animation: pulse 1.5s ease-in-out infinite,
    fade 1.5s ease-in-out infinite alternate;
}

/* Scale (pulse) animation */
@-webkit-keyframes pulse {
  0%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    /* Adjust scale intensity */
  }
}

@keyframes pulse {
  0%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    /* Adjust scale intensity */
  }
}
/* Fade effect */
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
    /* Adjust fade intensity */
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
    /* Adjust fade intensity */
  }
}
/* ============================
    01.06 Scroll to Top 
=============================== */
.scroll-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  color: hsl(var(--white));
  width: 48px;
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 10px;
  z-index: 5;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
  -webkit-transform: scale(0);
  transform: scale(0);
  background-color: hsl(var(--primary));
}

.scroll-top:hover {
  color: hsl(var(--white));
  background-color: #0c2b47;
}

.scroll-top.show {
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* ============================
    02.01 header css 
=============================== */
.home-one-header {
  background: hsl(var(--black2));
  z-index: 11;
}

@media (max-width: 991.98px) {
  .home-one-header {
    display: none;
  }
}

.home-one-header .nice-select:after {
  width: 7px;
  height: 7px;
}

.header-addres {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.header-addres .left-adders {
  position: relative;
}

.header-addres .left-adders::before,
.header-addres .left-adders::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
}

.header-addres .left-adders::before {
  width: 93%;
  height: 25px;
  background: #0c2b47;
  bottom: -24px;
  left: 0;
  z-index: 111;
  -webkit-clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
}

.header-addres .left-adders::after {
  width: 38px;
  height: 24px;
  background: #0c2b47ab;
  bottom: -24px;
  right: 18px;
  z-index: 22;
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.header-addres .left-adders .top-adders-contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #0c2b47;
  padding: 24px 80px 1px 30px;
  gap: 40px;
  position: relative;
  -webkit-clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%);
}

.header-addres .left-adders .adders-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

.header-addres .left-adders .adders-content:hover i {
  background: hsl(var(--white));
  color: hsl(var(--primary));
}

.header-addres .left-adders .adders-content i {
  background: #ffffff;
  width: 50px;
  height: 50px;
  border-radius: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #0c2b47;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.header-addres .left-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 25px;
}

.header-addres .social-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.header-addres .social-icon a {
  background: #0c2b47;
  width: 30px;
  height: 30px;
  border-radius: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: var(--gray3);
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  font-size: 12px;
}

.header-addres .social-icon a:hover {
  background: hsl(var(--primary));
  color: hsl(var(--white));
  font-size: 14px;
}

.header-addres .language-select-btn {
  background: none;
  border: 0;
  color: hsl(var(--gray4));
  font-size: 16px;
  font-weight: 600;
}

.header-addres .language-select-btn .option {
  color: #0c2b47;
}

/* ============================
    01.02 navbar css 
=============================== */
.navbar-home-one {
  background: none;
  width: 100%;
  position: absolute;
  top: 75px;
  z-index: 2;
}

.navbar-home-one.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}

.navbar-home-one.sticky .navbar-brand {
  margin-top: 0;
}

@media (max-width: 991.98px) {
  .navbar-home-one {
    top: 0;
    background: #0c2b47;
    -webkit-box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.2);
  }
}

.navbar-home-one .navbar-brand {
  margin-top: 25px;
}

@media (max-width: 991.98px) {
  .navbar-home-one .navbar-brand {
    margin-top: 0;
    padding-left: 10px;
  }
}

@media screen and (max-width: 424px) {
  .navbar-home-one .navbar-brand {
    margin-right: 0;
    width: 150px;
  }
}

.navbar-home-one .navbar {
  background: hsl(var(--white));
  padding: 0;
  padding-left: 30px;
  -webkit-box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 991.98px) {
  .navbar-home-one .navbar {
    padding: 10px 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

.navbar-home-one .navbar .btn-close,
.navbar-home-one .navbar .navbar-toggler {
  border: 0;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.navbar-home-one .navbar .navbar-nav {
  gap: 25px;
}

@media (max-width: 991.98px) {
  .navbar-home-one .navbar .navbar-nav {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    gap: 0px;
  }
}

.navbar-home-one .navbar .navbar-nav li .nav-link {
  color: #000;
  font-size: 16px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  font-weight: 600;
  padding: 32px 0;
}

.navbar-home-one .navbar .navbar-nav li .nav-link.active,
.navbar-home-one .navbar .navbar-nav li .nav-link:hover {
  color: #0c2b47;
}

@media (min-width: 992px) {
  .navbar-home-one .navbar .navbar-nav li .nav-link {
    color: #fff;
  }

  .navbar-home-one .navbar .navbar-nav li .nav-link.active,
  .navbar-home-one .navbar .navbar-nav li .nav-link:hover {
    color: #659fd4;
  }
}

@media (min-width: 1200px) {
  .navbar-home-one .navbar .navbar-nav li .nav-link {
    color: #000;
  }

  .navbar-home-one .navbar .navbar-nav li .nav-link.active,
  .navbar-home-one .navbar .navbar-nav li .nav-link:hover {
    color: #0c2b47;
  }
}

@media (max-width: 991.98px) {
  .navbar-home-one .navbar .navbar-nav li .nav-link {
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .navbar-home-one .navbar .navbar-nav li .nav-link.show {
    border-bottom: none;
  }
}

.navbar-home-one .right-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  padding-left: 10px;
}

@media (max-width: 991.98px) {
  .navbar-home-one .right-nav {
    display: none;
  }
}

.navbar-home-one .btn-search {
  background: none;
  border: 0;
  color: hsl(var(--gray3));
  font-size: 16px;
}

.navbar-home-one .btn-book {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--white));
  background: hsl(var(--primary));
  color: hsl(var(--white));
  font-size: 20px;
  font-weight: 700;
  padding: 35px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  border-radius: 0;
}

.navbar-home-one .btn-book:hover {
  background-color: transparent;
  color: hsl(var(--white));
}

.navbar-home-one .btn-book:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.navbar-home-one .btn-book::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: #0c2b47;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

@media (max-width: 1199.98px) {
  .navbar-home-one .btn-book {
    font-size: 16px;
    padding: 35px 15px;
  }
}

@media (max-width: 991.98px) {
  .navbar-home-one .btn-book {
    padding: 25px;
  }
}
/* ============================
    01.03 banner css 
=============================== */
.banner-area {
  position: relative;
}

@media (max-width: 991.98px) {
  .banner-area {
    /* padding-top: 65px; */
    background-image: url("../images/banner-phone-bg.jpg");
  }
}

.banner-area .slide-item {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.banner-area .slide-item::before,
.banner-area .slide-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.banner-area .slide-item::before {
  background-image: url("../images/banner-bg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

.banner-area .slide-item::after {
  /*background: rgba(0, 0, 0, 0.6);*/
  z-index: -11;
}

.banner-content {
  padding: 285px 0 130px;
}

@media (max-width: 991.98px) {
  .banner-content {
    padding: 80px 0 90px;
    height: 100vh;
  }
}

.banner-content h1 {
  font-size: 4.6875rem;
  font-weight: 700;
  line-height: 85px;
  max-width: 650px;
}

@media (max-width: 1399.98px) {
  .banner-content h1 {
    font-size: 4.0625rem;
    line-height: 76px;
  }
}

@media (max-width: 767.98px) {
  .banner-content h1 {
    font-size: 3.4375rem;
    line-height: 66px;
  }
}

@media (max-width: 575.98px) {
  .banner-content h1 {
    font-size: 2.5rem;
    line-height: 56px;
  }
}

@media screen and (max-width: 374px) {
  .banner-content h1 {
    font-size: 1.875rem;
    line-height: 40px;
  }
}

.banner-content p {
  max-width: 436px;
  color: #e8e8e9;
  padding-top: 30px;
}

@media screen and (max-width: 424px) {
  .banner-content p {
    padding-top: 10px;
  }
}

.banner-content .banner-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 25px;
  padding: 40px 0;
}

@media screen and (max-width: 424px) {
  .banner-content .banner-btn {
    padding: 25px 0;
  }
}

@media screen and (max-width: 374px) {
  .banner-content .banner-btn {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
  }

  .banner-content .banner-btn .btn-started,
  .banner-content .banner-btn .btn-service {
    width: 100%;
  }
}

.banner-content .btn-service,
.btn-service {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--white));
  background: #0c2b47;
}

.banner-content .btn-service:hover {
  background-color: #082334;
  color: #ffffff;
}

.banner-content .btn-service:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.banner-content .btn-service::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: #0c2b47;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.banner-content .btn-started {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--white));
}

.banner-content .btn-started:hover {
  background-color: transparent;
  color: hsl(var(--white));
}

.banner-content .btn-started:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.banner-content .btn-started::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: #0c2b47;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.banner-content .client-review {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
}

.banner-content .client-review .client-img {
  padding-left: 10px;
  padding-right: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.banner-content .client-review .client-img button,
.banner-content .client-review .client-img img {
  width: 50px;
  height: 50px;
  border-radius: 100px;
  border: 2px solid #2f3235;
  margin: 0 -10px;
}

.banner-content .client-review .client-img button {
  background: #373c3f;
  color: hsl(var(--white));
}

/* ============================
    02.04 skilled css 
=============================== */
.skilled-area {
  overflow: hidden;
  /* Hover effect */
  /* Pseudo-element for hover effect */
}

.skilled-area .skilled-img {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.skilled-area .skilled-img figure {
  border-radius: 15px;
}

.skilled-area .skilled-img figure:last-child {
  grid-column: 1/-1;
}

.skilled-area .skilled-img img {
  width: 100%;
  height: auto;
}

.skilled-area .section-title p {
  padding-top: 25px;
  color: hsl(var(--gray3));
}

@media (max-width: 991.98px) {
  .skilled-area .section-title p {
    padding-top: 10px;
  }
}

.skilled-area .progress-bar-content {
  display: grid;
  gap: 15px;
  width: 100%;
  margin-top: 30px;
}

.skilled-area .progress-bar-content .fs-18 {
  color: #082334;
}

.skilled-area .progress-bar-content .progress {
  height: 11px;
  margin-top: 3px;
}

.skilled-area .experiences-content {
  padding-top: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media (max-width: 991.98px) {
  .skilled-area .experiences-content {
    padding-top: 40px;
  }
}

@media screen and (max-width: 524px) {
  .skilled-area .experiences-content {
    display: grid;
    gap: 20px;
  }
}

.skilled-area .experiences-content .exp-year {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.skilled-area .experiences-content .exp-year span {
  color: #0c2b47;
  text-align: center;
  font-family: "Fraunces";
  font-size: 75px;
  font-style: normal;
  font-weight: 700;
  line-height: 85px;
  border: 5px solid hsl(var(--primary));
  width: 140px;
  height: 140px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media (max-width: 1399.98px) {
  .skilled-area .experiences-content .exp-year span {
    width: 100px;
    height: 100px;
    font-size: 50px;
  }
}

.skilled-area .experiences-content .exp-year .exp-title {
  color: #0c2b47;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  width: 120px;
  background: var(--background-color);
  margin-left: -8px;
  padding: 15px 0;
}

@media (max-width: 1399.98px) {
  .skilled-area .experiences-content .exp-year .exp-title {
    font-size: 16px;
  }
}

.skilled-area .experiences-content .about-me-cto {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
  position: relative;
}

.skilled-area .experiences-content .about-me-cto::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -13px;
  width: 1px;
  height: 40px;
  background: hsl(var(--gray5));
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.skilled-area .experiences-content .about-me-cto .fs-20 {
  color: #0c2b47;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

@media (max-width: 1399.98px) {
  .skilled-area .experiences-content .about-me-cto .fs-20 {
    font-size: 18px;
  }
}

.skilled-area .experiences-content .about-me-cto .fs-16 {
  color: hsl(var(--gray3));
}

.skilled-area .experiences-content .about-me-cto img {
  border-radius: 100%;
}

.skilled-area .button {
  background-color: #007bff;
  /* Button color */
  color: white;
  border: none;
  border-radius: 5px;
  padding: 15px 30px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  /* Position for the pseudo-element */
  overflow: hidden;
  /* Ensure pseudo-element is contained */
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.skilled-area .button:hover {
  color: #007bff;
  /* Change text color on hover */
}

.skilled-area .button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  /* Light overlay */
  -webkit-transform: scale(0);
  transform: scale(0);
  /* Start scaled down */
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  /* Smooth transition */
  z-index: 0;
  /* Behind the text */
}

.skilled-area .button:hover::before {
  -webkit-transform: scale(1);
  transform: scale(1);
  /* Scale to full size on hover */
}

.skilled-area .button span {
  position: relative;
  /* To bring text above the pseudo-element */
  z-index: 1;
  /* Ensure text is above overlay */
}

.progress-bar {
  -webkit-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
  width: 0;
}

/* ============================
    02.05 who-we css
=============================== */
.who-we-arae {
  background-image: url("../images/about-bg.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.who-we-arae::before {
  /*content: url("../images/home-one/about-shape1.png");*/
  position: absolute;
  right: 0;
  width: 160px;
  top: 30%;
  -webkit-animation: alltuchtopdown 3500ms ease-out infinite;
  animation: alltuchtopdown 3500ms ease-out infinite;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .who-we-arae::before {
    display: none;
  }
}

.who-we-arae .container {
  position: relative;
}

.who-we-arae .who-we-img {
  -webkit-mask-image: url("../images/about-img.png");
  mask-image: url("../images/about-img.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 90%;
  mask-size: 90%;
}

@media screen and (max-width: 991px) {
  .who-we-arae .who-we-img {
    max-width: 90%;
    margin: 0 auto;
  }
}

@-webkit-keyframes maskMove {
  0% {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }

  50% {
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }

  100% {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }
}

@keyframes maskMove {
  0% {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }

  50% {
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }

  100% {
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }
}

.who-we-arae .who-tab-nav {
  margin-top: 40px;
  gap: 15px;
}

@media screen and (max-width: 424px) {
  .who-we-arae .who-tab-nav {
    gap: 5px;
  }
}

.who-we-arae .who-tab-nav button {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--white));
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 8px 16px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--gray5));
  font-family: "Inter";
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
}

.who-we-arae .who-tab-nav button:hover {
  background-color: transparent;
  color: hsl(var(--white));
}

.who-we-arae .who-tab-nav button:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.who-we-arae .who-tab-nav button::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: #0c2b47;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.who-we-arae .who-tab-nav button::before {
  background: hsl(var(--primary));
}

.who-we-arae .who-tab-nav button.active {
  background: hsl(var(--primary));
  color: hsl(var(--white));
}

.who-we-arae .who-tab-content .tab-pane p {
  color: hsl(var(--gray5));
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  margin: 40px 0;
  max-width: 550px;
}

.who-we-arae .who-tab-content .tab-pane ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

@media (max-width: 575.98px) {
  .who-we-arae .who-tab-content .tab-pane ul {
    grid-template-columns: 1fr;
  }
}

.who-we-arae .who-tab-content .tab-pane ul li {
  color: hsl(var(--white));
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.who-we-arae .who-tab-content .tab-pane ul li i {
  color: hsl(var(--primary));
}

.who-we-arae .project-number {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 70px;
}

@media screen and (max-width: 991px) {
  .who-we-arae .project-number {
    margin-top: 40px;
  }
}

@media screen and (max-width: 424px) {
  .who-we-arae .project-number {
    padding: 10px;
    margin-top: 40px;
    text-align: center;
  }
}

@media screen and (max-width: 374px) {
  .who-we-arae .project-number {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.who-we-arae .project-number .number-item {
  padding: 35px;
  position: relative;
}

@media screen and (max-width: 1199px) {
  .who-we-arae .project-number .number-item {
    padding: 25px;
  }
}

@media screen and (max-width: 424px) {
  .who-we-arae .project-number .number-item {
    padding: 5px;
  }
}

.who-we-arae .project-number .number-item::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 65px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (max-width: 424px) {
  .who-we-arae .project-number .number-item::before {
    display: none;
  }
}

.who-we-arae .project-number .number-item:last-child::before {
  display: none;
}

.who-we-arae .project-number .number-item .h4 {
  font-weight: 700;
  font-family: var(--heading-font);
  font-size: 2.25rem;
}

@media screen and (max-width: 1199px) {
  .who-we-arae .project-number .number-item .h4 {
    font-size: 1.875rem;
    margin-bottom: 0;
  }
}

@media screen and (max-width: 424px) {
  .who-we-arae .project-number .number-item .h4 {
    font-size: 1.25rem;
  }
}

.who-we-arae .project-number .number-item .fs-18 {
  color: hsl(var(--gray5));
  font-weight: 400;
}

@media screen and (max-width: 1199px) {
  .who-we-arae .project-number .number-item .fs-18 {
    font-size: 0.9375rem;
  }
}

@media screen and (max-width: 767px) {
  .who-we-arae .project-number .number-item .fs-18 {
    font-size: 0.875rem;
    margin-top: 3px;
  }
}

.shadow__text {
  white-space: nowrap;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.0625rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9.0625rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: -36%;
  -webkit-transform: translateY(-50%) rotate(90deg);
  transform: translateY(-50%) rotate(90deg);
  color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 991.98px) {
  .shadow__text {
    -webkit-transform: translateY(0%) rotate(0deg);
    transform: translateY(0%) rotate(0deg);
    top: 0;
    left: 0;
  }
}

@media screen and (max-width: 424px) {
  .shadow__text {
    font-size: 5rem;
  }
}
/* ============================
    02.06 why-choose css
=============================== */
.why-choose-area {
  background-image: url("../images/choose-shape.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.why-choose-area .why-choose-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}

@media (max-width: 767.98px) {
  .why-choose-area .why-choose-list {
    grid-template-columns: 1fr;
  }
}

.why-choose-area .why-choose-list .why-choose-item {
  border-radius: 10px;
  background: hsl(var(--white));
  -webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  padding: 24px;
  gap: 14px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.why-choose-area .why-choose-list .why-choose-item:hover {
  background: #0c2b47;
  -webkit-box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

.why-choose-area .why-choose-list .why-choose-item:hover .icon {
  background: hsl(var(--white));
}

.why-choose-area .why-choose-list .why-choose-item:hover .content .fs-20,
.why-choose-area .why-choose-list .why-choose-item:hover .content p {
  color: hsl(var(--white));
}

.why-choose-area .why-choose-list .why-choose-item .icon {
  background: hsl(var(--secondary) / 0.1);
  min-width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 100px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.why-choose-area .why-choose-list .why-choose-item .content .fs-20 {
  color: #0c2b47;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.why-choose-area .why-choose-list .why-choose-item .content p {
  color: hsl(var(--gray3));
  font-weight: 400;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

/* ============================
    02.07 services css
=============================== */
.services-area {
  background-image: url("../images/home-one/services-bg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
}

.services-area .services-item {
  border-radius: 15px;
  background: hsl(var(--white));
  -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.05);
  padding: 50px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

@media (max-width: 1399.98px) {
  .services-area .services-item {
    padding: 50px 24px;
  }
}

.services-area .services-item::before,
.services-area .services-item::after {
  content: "";
  position: absolute;
  top: -100px;
  left: 30%;
  width: 0;
  height: 0;
  -webkit-transform: rotate(32.015deg);
  transform: rotate(32.015deg);
  background: rgba(0, 0, 0, 0.04);
  z-index: -1;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.services-area .services-item::after {
  -webkit-transform: rotate(-32.015deg);
  transform: rotate(-32.015deg);
}

.services-area .services-item:hover {
  background: hsl(var(--primary));
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

.services-area .services-item:hover::before,
.services-area .services-item:hover::after {
  width: 150px;
  height: 650px;
}

.services-area .services-item:hover .icon svg {
  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(129deg)
    brightness(160%) contrast(103%);
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(129deg)
    brightness(160%) contrast(103%);
}

.services-area .services-item:hover a img,
.services-area .services-item:hover button img {
  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(129deg)
    brightness(160%) contrast(103%);
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(129deg)
    brightness(160%) contrast(103%);
}

.services-area .services-item:hover h5,
.services-area .services-item:hover p {
  color: hsl(var(--white)) !important;
}

.services-area .services-item .icon {
  margin: 0 auto;
  text-align: center;
}

.services-area .services-item .icon svg {
  margin: 0 auto;
  color: #0c2b47;
}

.services-area .services-item .content {
  text-align: center;
}

.services-area .services-item .content h5 {
  font-family: "Inter";
  font-size: 1.625rem;
  padding: 20px 0 18px;
  color: #0c2b47;
  margin-bottom: 0;
}

@media screen and (max-width: 1399px) {
  .services-area .services-item .content h5 {
    font-size: 1.4375rem;
  }
}

@media screen and (max-width: 767px) {
  .services-area .services-item .content h5 {
    font-size: 1.1875rem;
  }
}

.services-area .services-item .content p {
  color: hsl(var(--gray3));
  font-weight: 400;
}

.services-area .services-item .content .btn-services {
  background: none;
  margin-top: 30px;
  display: inline-block;
  cursor: pointer;
}

/* ============================
    02.08 team css
=============================== */
.team-area {
  background: #f8f8f8;
}

.team-area .team-item {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: hsl(var(--white));
  padding: 50px 30px;
  text-align: center;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.team-area .team-item:hover {
  background: hsl(var(--primary));
}

.team-area .team-item:hover .image img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.team-area .team-item:hover .fs-20,
.team-area .team-item:hover p {
  color: hsl(var(--white)) !important;
}

.team-area .team-item:hover .social-links a {
  background: hsl(var(--white));
}

.team-area .team-item .image {
  width: 150px;
  height: 150px;
  margin: 0 auto;
  border-radius: 100px;
  overflow: hidden;
}

.team-area .team-item .image img {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.team-area .team-item .content {
  padding-top: 24px;
}

.team-area .team-item .content .fs-20 {
  color: #0c2b47;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.team-area .team-item .content p {
  font-size: 16px;
  padding: 5px 0 10px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.team-area .team-item .social-links {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.team-area .team-item .social-links a {
  font-size: 14px;
  color: #0c2b47;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  width: 35px;
  height: 35px;
  background: rgba(33, 38, 68, 0.06);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 100px;
}

.team-area .team-item .social-links a:hover {
  background: hsl(var(--white));
}

.expert-team {
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  padding-left: 10px;
  overflow: hidden;
}

.expert-team__img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 10px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
  padding-left: 10px;
  padding-bottom: 10px;
}

.expert-team__img .image-effect {
  border-radius: 10px;
  overflow: hidden;
}

.expert-team__img::before,
.expert-team__img::after {
  content: "";
  position: absolute;
  z-index: -1;
}

.expert-team__img::before {
  width: 95%;
  height: 95%;
  border: 2px solid hsl(var(--gray5));
  border-radius: 10px;
  left: -10px;
  bottom: -10px;
  -webkit-transition: border-color 0.3s;
  transition: border-color 0.3s;
}

@media screen and (max-width: 424px) {
  .expert-team__img::before {
    border-color: hsl(var(--primary));
  }
}

.expert-team__img::after {
  width: 137px;
  height: 137px;
  border-radius: 30px 30px 30px 8px;
  background: hsl(var(--gray5));
  left: -10px;
  bottom: -10px;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

@media screen and (max-width: 424px) {
  .expert-team__img::after {
    background: hsl(var(--primary));
  }
}

.expert-team__img:hover::before {
  border-color: hsl(var(--primary));
}

.expert-team__img:hover::after {
  background: hsl(var(--primary));
}

.expert-team__img:hover .social-links a {
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

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

.expert-team__img .social-links {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  gap: 10px;
  -webkit-transform: translate(-15px, 15px);
  transform: translate(-15px, 15px);
  z-index: 1;
}

.expert-team__img .social-links a {
  background: hsl(var(--primary));
  color: hsl(var(--white));
  font-size: 15px;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  right: 0;
  -webkit-transform: translateX(60px);
  transform: translateX(60px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.expert-team__img .social-links a:hover {
  background: hsl(var(--white));
  color: hsl(var(--primary));
}

.expert-team__img .social-links a:nth-child(1) {
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}

.expert-team__img .social-links a:nth-child(2) {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.expert-team__img .social-links a:nth-child(3) {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.expert-team__img .social-links a:nth-child(4) {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.expert-team__img .social-links a:nth-child(5) {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

@media screen and (max-width: 424px) {
  .expert-team__img .social-links a {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

.expert-team__text {
  margin-top: 30px;
}

@media screen and (max-width: 424px) {
  .expert-team__text h4 {
    font-size: 1.25rem;
    margin-bottom: 0;
  }
}

.expert-team__text p {
  font-size: 16px;
  padding: 5px 0 0;
}

/* ============================
    02.09 project css
=============================== */
.project-area {
  background: #082334;
  overflow: hidden;
  position: relative;
}

.project-area .container {
  position: relative;
}

.project-area::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 100%;
  height: 130px;
  background: var(--background-color);
}

.project-area .shadow__text {
  top: 34%;
}

.project-area .section-title p {
  color: hsl(var(--gray4));
}

.project-area .btn-project {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--white));
  background: hsl(var(--primary));
}

.project-area .btn-project:hover {
  background-color: transparent;
  color: hsl(var(--white));
}

.project-area .btn-project:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.project-area .btn-project::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: #0c2b47;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.project-area .project-slide .owl-stage-outer {
  margin-right: -2000px !important;
}

.project-item {
  position: relative;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.project-item:hover {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.project-item:hover .content {
  background: #082334;
}

.project-item:hover .content::before {
  background: hsl(var(--white));
}

.project-item:hover .content .fs-20,
.project-item:hover .content p {
  color: hsl(var(--white));
}

.project-item .image img {
  width: 100%;
  height: auto;
}

.project-item .content {
  position: absolute;
  bottom: 0;
  width: 90%;
  background: hsl(var(--white));
  padding: 40px 40px 40px 55px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

@media (max-width: 767.98px) {
  .project-item .content {
    padding: 24px;
  }
}

@media screen and (max-width: 424px) {
  .project-item .content {
    padding: 18px;
  }
}

.project-item .content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 40px;
  width: 3px;
  height: 50px;
  background: hsl(var(--primary));
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (max-width: 767.98px) {
  .project-item .content::before {
    left: 0;
  }
}

.project-item .content .fs-20 {
  color: #0c2b47;
  font-size: 24px;
  text-transform: capitalize;
}

@media (max-width: 575.98px) {
  .project-item .content .fs-20 {
    font-size: 18px;
  }
}

.project-item .content p {
  color: hsl(var(--gray3));
  font-size: 18px;
}

@media (max-width: 575.98px) {
  .project-item .content p {
    font-size: 16px;
  }
}
/* ============================
    02.10 pricing css
=============================== */
.pricing-area .project-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 30px;
  background: #f8fbff;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  max-width: 276px;
  margin: 50px auto;
  padding: 7px;
}

.pricing-area .project-nav button {
  font-size: 20px;
  color: hsl(var(--gray3));
  font-weight: 500;
  border-radius: 32.912px;
  padding-left: 30px;
  padding-right: 30px;
}

.pricing-area .project-nav button.active {
  background: hsl(var(--white));
  -webkit-box-shadow: 0px 6.582px 26.33px 0px rgba(18, 2, 47, 0.1);
  box-shadow: 0px 6.582px 26.33px 0px rgba(18, 2, 47, 0.1);
  color: #0c2b47;
}

.pricing-area .pricing-item {
  border-radius: 12px;
  background: hsl(var(--white));
  padding: 40px 30px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.pricing-area .pricing-item:hover {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.pricing-area .pricing-item:hover .price,
.pricing-area .pricing-item:hover .pricing-btn {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--white));
}

.pricing-area .pricing-item .title {
  text-align: center;
}

.pricing-area .pricing-item .title .fs-20 {
  color: #0c2b47;
  padding: 15px 0 5px;
}

.pricing-area .pricing-item .title p {
  color: hsl(var(--gray3));
}

.pricing-area .pricing-item .price {
  border-radius: 12px;
  background: #d8e5fe;
  font-family: "Fraunces";
  padding: 5px 30px;
  font-size: 30px;
  font-weight: 700;
  color: hsl(var(--primary));
  text-align: center;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media (max-width: 1399.98px) {
  .pricing-area .pricing-item .price {
    font-size: 24px;
    padding: 5px 10px;
  }
}

.pricing-area .pricing-item .price .per-month {
  font-size: 25px;
}

.pricing-area .pricing-item .list-unstyled {
  display: grid;
  gap: 10px;
  margin: 30px 0;
}

.pricing-area .pricing-item .list-unstyled li {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: hsl(var(--gray3));
  gap: 10px;
}

.pricing-area .pricing-item .list-unstyled li::before {
  content: "\f111";
  font-weight: 900;
  font-family: "Font Awesome 6 free";
  font-size: 5px;
}

.pricing-area .pricing-item .list-unstyled li::after {
  content: "\f00c";
  font-weight: 900;
  font-family: "Font Awesome 6 free";
  font-size: 15px;
  margin-left: auto;
  color: hsl(var(--success));
}

.pricing-area .pricing-item .list-unstyled li.list-erro::after {
  content: "\f00d";
  color: hsl(var(--error));
}

.pricing-area .pricing-item .pricing-btn {
  border: 1px solid hsl(var(--gray4));
  border-radius: 4px;
  padding: 12px 20px;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 500;
  color: hsl(var(--gray3));
  width: 100%;
  text-align: center;
}

@media (max-width: 1399.98px) {
  .pricing-area .pricing-item .pricing-btn {
    padding: 12px 15px;
  }
}

.pricing-area .pricing-item .pricing-btn:hover {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--white));
}

/* ============================
    02.11 client-feedback css
=============================== */
.client-feedback-area {
  background-image: url("../images/feedback-bg.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
}

.client-feedback-area .container {
  position: relative;
}

.client-feedback-area .feedback-item {
  border-radius: 12px;
  background: #203644;
  padding: 50px;
  min-height: 600px;
}

@media screen and (max-width: 767px) {
  .client-feedback-area .feedback-item {
    min-height: 450px;
    padding: 40px 30px;
  }
}

.client-feedback-area .feedback-item p {
  color: hsl(var(--gray4));
  font-family: "Fraunces";
  font-size: 32px;
  font-weight: 400;
  line-height: 45px;
  margin: 30px 0;
}

@media (max-width: 1199.98px) {
  .client-feedback-area .feedback-item p {
    font-size: 28px;
    line-height: 1.3;
  }
}

@media screen and (max-width: 991px) {
  .client-feedback-area .feedback-item p {
    font-size: 20px;
  }
}

@media (max-width: 575.98px) {
  .client-feedback-area .feedback-item p {
    font-size: 18px;
  }
}

.client-feedback-area .feedback-item .feedback-admin {
  position: relative;
  padding-left: 45px;
}

.client-feedback-area .feedback-item .feedback-admin::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 30px;
  height: 1px;
  background: hsl(var(--primary));
}

.client-feedback-area .feedback-item .feedback-admin .feedback-name {
  font-size: 20px;
  font-weight: 600;
  color: hsl(var(--white));
}

@media screen and (max-width: 991px) {
  .client-feedback-area .feedback-item .feedback-admin .feedback-name {
    font-size: 18px;
  }
}

.client-feedback-area .feedback-item .feedback-admin .feedback-company {
  font-size: 16px;
  color: hsl(var(--gray4));
  padding-top: 5px;
}

.client-feedback-area .owl-stage-outer {
  margin-right: -2000px !important;
}

.client-feedback-area .arrow-btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  gap: 20px;
}

.client-feedback-area .arrow-btn-group button {
  width: 56px;
  height: 56px;
  color: hsl(var(--gray3));
  background: #203644;
  border-radius: 5px;
  font-size: 25px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.client-feedback-area .arrow-btn-group button:hover {
  background: hsl(var(--primary));
  color: hsl(var(--white));
}

/* ============================
    02.13 contact-info css
=============================== */
.contact-info-area {
  /* background-image: url("../images/home-one/contact-info-bg.jpg"); */
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.contact-info-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(19, 24, 57, 0.7); */
  z-index: -1;
}

.contact-info-area .contact-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /*background: hsl(var(--primary));*/
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media (max-width: 991.98px) {
  .contact-info-area .contact-box {
    grid-template-columns: 1fr;
  }
}

.contact-info-area .contact-box .left-contact,
.contact-info-area .contact-box .right-contact {
  padding: 70px 40px;
}

@media (max-width: 767.98px) {
  .contact-info-area .contact-box .left-contact,
  .contact-info-area .contact-box .right-contact {
    /* padding: 50px 30px; */
    padding: 0;
  }
}

.contact-info-area .contact-box .right-contact {
  background: hsl(var(--white));
}

.contact-info-area .contact-address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
  margin-bottom: 24px;
}

.contact-info-area .contact-address .icon {
  margin-top: 10px;
}

.contact-info-area .contact-address .content .fs-20 {
  color: hsl(var(--white));
}

.contact-info-area .contact-address .content p {
  font-size: 16px;
  color: hsl(var(--gray5));
  max-width: 268px;
  margin-top: 10px;
}

.contact-info-area .contact-address .content a {
  color: hsl(var(--gray5));
}

.contact-info-area .contact-address .content a:hover {
  color: #0c2b47;
}

.contact-info-area .contact-from {
  display: grid;
  gap: 24px;
}

.contact-info-area .contact-from label {
  color: hsl(var(--gray3));
  font-size: 16px;
  font-weight: 600;
}

.contact-info-area .contact-from textarea,
.contact-info-area .contact-from input {
  border-radius: 4px;
  border: 1px solid rgba(19, 24, 57, 0.13);
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  width: 100%;
  padding: 12px 17px;
}

.contact-info-area .contact-from textarea::-webkit-input-placeholder,
.contact-info-area .contact-from input::-webkit-input-placeholder {
  color: rgba(85, 85, 85, 0.62);
}

.contact-info-area .contact-from textarea::-moz-placeholder,
.contact-info-area .contact-from input::-moz-placeholder {
  color: rgba(85, 85, 85, 0.62);
}

.contact-info-area .contact-from textarea:-ms-input-placeholder,
.contact-info-area .contact-from input:-ms-input-placeholder {
  color: rgba(85, 85, 85, 0.62);
}

.contact-info-area .contact-from textarea::-ms-input-placeholder,
.contact-info-area .contact-from input::-ms-input-placeholder {
  color: rgba(85, 85, 85, 0.62);
}

.contact-info-area .contact-from textarea::placeholder,
.contact-info-area .contact-from input::placeholder {
  color: rgba(85, 85, 85, 0.62);
}

.contact-info-area .contact-from textarea {
  height: 100px;
  padding-top: 10px;
}

.contact-info-area .contact-from .btn-consultation,
.btn-consultation {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--white));
  background: hsl(var(--primary));
  width: 100%;
}

.contact-info-area .contact-from .btn-consultation:hover,
.btn-consultation:hover {
  background-color: transparent;
  color: hsl(var(--white));
}

.contact-info-area .contact-from .btn-consultation:hover::before,
.btn-consultation:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.contact-info-area .contact-from .btn-consultation::before,
.btn-consultation::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: #0c2b47;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.contact-info-area.contact-info__two .left-contact {
  padding: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 767.98px) {
  .contact-info-area.contact-info__two .left-contact {
    height: 350px;
  }
}

.contact-info-area.contact-info__two .left-contact iframe {
  width: 100%;
  height: 100%;
}

/* ============================
    02.12 blog css
=============================== */
.blog-area .blog-content {
  display: grid;
}

.blog-area .section-title {
  padding-bottom: 0px;
}

.blog-area .section-title p {
  color: hsl(var(--gray3));
  padding: 10px 0 20px;
}

.blog-area .section-title .btn-blog-post {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--white));
  display: inline-block;
  background: hsl(var(--primary));
}

.blog-area .section-title .btn-blog-post:hover {
  background-color: transparent;
  color: hsl(var(--white));
}

.blog-area .section-title .btn-blog-post:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.blog-area .section-title .btn-blog-post::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: #0c2b47;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.blog-area .blog-item {
  border-radius: 10px;
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  overflow: hidden;
  z-index: 2;
}

.blog-area .blog-item:hover .image-effect img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.blog-area .blog-item::before {
  content: "";
  position: absolute;
  border-radius: 12px;
  background: linear-gradient(
    179deg,
    rgba(255, 255, 255, 0) 35.36%,
    rgba(0, 15, 92, 0.5) 72.28%
  );
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.blog-area .blog-item .image-effect {
  height: 100%;
}

.blog-area .blog-item .image-effect img {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.blog-area .blog-item .blog-content {
  position: absolute;
  bottom: 0;
  padding: 20px;
  z-index: 1;
}

@media screen and (max-width: 424px) {
  .blog-area .blog-item .blog-content {
    padding: 10px;
  }
}

.blog-area .blog-item .blog-content .date {
  background: hsl(var(--primary));
  padding: 5px 8px;
  display: inline-block;
  color: hsl(var(--white));
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 15px;
  width: 100px;
  text-align: center;
}

.blog-area .blog-item .blog-content h6 {
  font-size: 20px;
  font-weight: 700;
  color: hsl(var(--white));
  font-family: "Inter";
}

@media screen and (max-width: 424px) {
  .blog-area .blog-item .blog-content h6 {
    font-size: 16px;
  }
}
/* ============================
    02.14 company logo css 
=============================== */
.company-logo-area .container {
  overflow: hidden;
}

.company-logo-area .company-logo-content {
  overflow: hidden;
  white-space: nowrap;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.company-logo-area .company-logo-content .com-logo {
  width: auto;
  height: 100px;
  border-radius: 4px;
  border: 1px solid rgba(14, 0, 0, 0.1);
  background: var(--white);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0 20px;
}

/* ============================
    02.15 footer css 
=============================== */
.footer-area {
  background-image: url("../images/banner_internos/banner_footer_lake_atitlan.webp");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.footer-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(12 43 71 / 58%);
  z-index: -1;
}

.footer-area .footer-content {
  display: grid;
  grid-template-columns: 340px 1fr;
}

@media screen and (max-width: 991px) {
  .footer-area .footer-content {
    grid-template-columns: 1fr;
  }
}

.footer-area .footer-content .footer-addres {
  background: #082334;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 50px 30px;
}

.footer-area .footer-content .footer-addres .addres-text {
  display: block;
}

.footer-area .footer-content .footer-addres .addres-text p {
  color: hsl(var(--gray5));
  font-size: 16px;
  padding: 30px 0 40px;
}

.footer-area .footer-content .footer-addres .social-list,
.social-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

.footer-area .footer-content .footer-addres .social-list a,
.social-list a {
  color: hsl(var(--white));
  font-size: 14px;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  background: #0c2b47;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.footer-area .footer-content .footer-addres .social-list a:hover,
.social-list a:hover {
  background: #fec40e;
}

.footer-area .footer-content .footer-wedget-area {
  background: rgb(0 0 0 /0.7);
}

.footer-area .footer-content .footer-wedget-area .wedget-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 80px 40px;
}

.footer-area .footer-content .footer-wedget-area .wedget-item .wedget-title {
  font-size: 20px;
  font-weight: 700;
  font-family: "inter";
  color: var(--white);
  margin-bottom: 15px;
}

.footer-area .footer-content .footer-wedget-area .wedget-item .wedget-list {
  display: grid;
  gap: 15px;
}

.footer-area .footer-content .footer-wedget-area .wedget-item .wedget-list a {
  position: relative;
  font-size: 16px;
  font-family: "Inter";
  color: hsl(var(--gray5));
  padding-left: 20px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.footer-area
  .footer-content
  .footer-wedget-area
  .wedget-item
  .wedget-list
  a:hover {
  color: hsl(var(--primary));
}

.footer-area
  .footer-content
  .footer-wedget-area
  .wedget-item
  .wedget-list
  a:hover:before {
  width: 15px;
}

.footer-area
  .footer-content
  .footer-wedget-area
  .wedget-item
  .wedget-list
  a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: hsl(var(--primary));
  border-radius: 50px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.footer-area .footer-content .footer-wedget-area .wedget-item .wedget-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.footer-area
  .footer-content
  .footer-wedget-area
  .wedget-item
  .wedget-gallery
  img {
  border-radius: 5px;
}

.footer-area .footer-content .footer-wedget-area .newsletter p {
  color: hsl(var(--gray4));
}

.footer-area .footer-content .footer-wedget-area .newsletter p span {
  color: hsl(var(--primary));
}

.footer-area .footer-content .footer-wedget-area .newsletter form {
  position: relative;
  margin-top: 20px;
}

.footer-area .footer-content .footer-wedget-area .newsletter form input {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  height: 50px;
  width: 100%;
  padding: 10px 50px 10px 15px;
  color: hsl(var(--white));
}

.footer-area .footer-content .footer-wedget-area .newsletter form button {
  color: hsl(var(--white));
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.footer-area .footer-content .copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 16px;
  text-align: center;
  padding: 24px 0;
}

.footer-area .footer-content .copyright p {
  color: hsl(var(--white) / 0.7);
}

.error-area .error-404 {
  text-align: center;
}

.error-area .error-404 h2 {
  margin-top: 40px;
}

.error-area .error-404 p {
  margin: 20px auto 30px;
  max-width: 550px;
}

.error-area .error-404 .btn-back {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--white));
  background: hsl(var(--primary));
}

.error-area .error-404 .btn-back:hover {
  background-color: transparent;
  color: hsl(var(--white));
}

.error-area .error-404 .btn-back:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.error-area .error-404 .btn-back::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: #0c2b47;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.text-slider {
  position: relative;
  z-index: 1;
  padding: 15px 0;
  margin: -15px 0;
}

.text-slider::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: hsl(var(--black));
  -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}

.text-slider .text-item {
  background: rgb(12 43 71 / 68%);
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.6);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 145px;
  line-height: 1.3;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 991.98px) {
  .text-slider .text-item {
    font-size: 80px;
  }
}

.text-slider .text-item span {
  display: inline-block;
  padding-right: 20px;
  /* Adds gap at the end */
  -webkit-animation: scrollText 15s linear infinite;
  animation: scrollText 15s linear infinite;
}

@-webkit-keyframes scrollText {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(calc(-100% - 20px));
    transform: translateX(calc(-100% - 20px));
    /* 20px for the gap */
  }
}

@keyframes scrollText {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(calc(-100% - 20px));
    transform: translateX(calc(-100% - 20px));
    /* 20px for the gap */
  }
}
/* ============================
    03.01 header-top css 
=============================== */
.header-top-area {
  background: hsl(var(--first-header-color));
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 11;
}

@media (max-width: 991.98px) {
  .header-top-area {
    display: none;
  }
}

.header-top-area .header-top-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.header-top-area .header-top-right-address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 40px;
}

.header-top-area .top-adders-contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
  position: relative;
}

.header-top-area .top-adders-contents .header-add-lien {
  width: 1px;
  height: 25px;
  background: rgba(255, 255, 255, 0.19);
}

.header-top-area .top-adders-contents .adders-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

.header-top-area .top-adders-contents .adders-content:hover i {
  background: hsl(var(--primary));
}

.header-top-area .top-adders-contents .adders-content i {
  background: rgba(255, 255, 255, 0.19);
  width: 50px;
  height: 50px;
  border-radius: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: hsl(var(--white));
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.header-top-area .top-adders-contents .adders-content .fs-16 {
  /* color: hsl(var(--gray4)); */
  color: #fff;
}

.header-top-area .social-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.header-top-area .social-icon a {
  background: rgba(255, 255, 255, 0.1);
  width: 40px;
  height: 40px;
  border-radius: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /* color: var(--gray3); */
  color: #fff;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  font-size: 14px;
}

.header-top-area .social-icon a:hover {
  background: hsl(var(--primary));
  color: hsl(var(--white));
  font-size: 14px;
}

/* ============================
    03.02 navbar css 
=============================== */
.navbar-home-two {
  background: hsl(var(--two-header-color));
  z-index: 2;
}

@media (max-width: 991.98px) {
  .navbar-home-two {
    padding: 15px 0;
  }
}

.navbar-home-two.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background: hsl(var(--two-header-color));
  -webkit-box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 10px -4px rgba(0, 0, 0, 0.2);
  z-index: 99;
}

@media screen and (max-width: 424px) {
  .navbar-home-two .navbar-brand {
    margin-right: 0;
    width: 190px;
  }
}

@media screen and (max-width: 374px) {
  .navbar-home-two .navbar-brand {
    margin-right: 0;
    width: 150px;
  }
}

.navbar-home-two .navbar {
  padding: 0;
}

.navbar-home-two .navbar .navbar-nav {
  gap: 25px;
}

@media (max-width: 991.98px) {
  .navbar-home-two .navbar .navbar-nav {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    gap: 5px;
  }
}

.navbar-home-two .navbar .navbar-nav li .nav-link {
  color: hsl(var(--white));
  font-size: 16px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  font-weight: 600;
  padding: 22px 0;
}

.navbar-home-two .navbar .navbar-nav li .nav-link.active,
.navbar-home-two .navbar .navbar-nav li .nav-link:hover {
  color: #0c2b47;
}

@media (max-width: 991.98px) {
  .navbar-home-two .navbar .navbar-nav li .nav-link {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

.navbar-home-two .navbar .navbar-nav li .nav-link .nav-link.show {
  border-bottom: 0;
}

.navbar-home-two .navbar .btn-searc {
  color: hsl(var(--gray3));
}

.navbar-home-two .btn-book {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: #082334;
  color: hsl(var(--white));
  font-size: 20px;
  font-weight: 700;
  padding: 23px 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  border-radius: 0;
}

.navbar-home-two .btn-book:hover {
  background-color: transparent;
  color: #0c2b47;
}

.navbar-home-two .btn-book:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.navbar-home-two .btn-book::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: hsl(var(--white));
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

@media (max-width: 1199.98px) {
  .navbar-home-two .btn-book {
    font-size: 16px;
    padding: 20px 15px;
  }
}

@media (max-width: 991.98px) {
  .navbar-home-two .btn-book {
    padding: 25px;
  }
}

@media (max-width: 991.98px) {
  .navbar-home-two .offcanvas {
    background: hsl(var(--white));
  }
}

.navbar-home-two .btn-close {
  -webkit-filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(128deg)
    brightness(104%) contrast(103%);
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(128deg)
    brightness(104%) contrast(103%);
}

.navbar-respond .btn-booking {
  width: 43px;
  padding: 10px;
}

@media screen and (max-width: 424px) {
  .navbar-respond .btn-booking {
    padding: 7px;
    width: 35px;
    height: 40px;
  }
}

.navbar-respond .navbar-toggler,
.navbar-respond .btn-close {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 0;
  opacity: 1;
}

.navbar-respond .btn-booking,
.navbar-respond .btn-searc,
.navbar-respond .navbar-toggler {
  background: hsl(var(--white)) !important;
  border-radius: 10px;
  color: hsl(var(--gray2));
  margin: 0 3px;
}

.navbar-respond .navbar-toggler {
  height: 45px;
}

.navbar-respond .btn-searc {
  width: 43px;
  padding: 10px;
}

@media screen and (max-width: 424px) {
  .navbar-respond .btn-searc {
    width: 35px;
    padding: 9px;
  }
}

@media (max-width: 991.98px) {
  .navbar-respond .offcanvas-body {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.navbar-respond .dropdown-menu-end {
  right: 0;
  left: auto;
}

.navbar-respond .nav-item:hover .nav-link {
  color: hsl(var(--primary));
}

.navbar-respond .nav-item:hover .dropdown-menu {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  opacity: 1;
}

@media all and (min-width: 991.98px) {
  .navbar-respond .nav-item:hover .dropdown-menu {
    visibility: visible;
    top: 100%;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
}

@media (max-width: 991.98px) {
  .navbar-respond .nav-item.dropdown .nav-link {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media (min-width: 992px) {
  .navbar-respond .nav-item.dropdown .nav-link::after {
    content: "\f107";
    font-weight: 900;
    font-family: "Font Awesome 6 free";
  }
}

.navbar-respond .nav-item .dropdown-menu {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  margin-top: 0;
  padding: 15px 20px;
  min-width: 200px;
  border: 1px solid hsl(var(--border-color));
}

@media all and (min-width: 991.98px) {
  .navbar-respond .nav-item .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
  }
}

.navbar-respond .nav-item .dropdown-menu.fade-down {
  top: 80%;
  -webkit-transform: rotateX(-75deg);
  transform: rotateX(-75deg);
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}

.navbar-respond .nav-item .dropdown-menu.fade-up {
  top: 100%;
}

.navbar-respond .nav-item .dropdown-menu a {
  padding: 5px 0px;
  background: none;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  position: relative;
  font-weight: 500;
  font-size: 14px;
  border: 0;
  color: hsl(var(--gray3));
}

.navbar-respond .nav-item .dropdown-menu a::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 2px;
  width: 10px;
  z-index: 99;
  background: hsl(var(--primary));
  opacity: 0;
  border-radius: unset;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.navbar-respond .nav-item .dropdown-menu a.active,
.navbar-respond .nav-item .dropdown-menu a:hover {
  padding-left: 5px;
  color: #0c2b47;
}

.navbar-respond .nav-item .dropdown-menu a.active::before,
.navbar-respond .nav-item .dropdown-menu a:hover::before {
  opacity: 1;
  left: -15px;
}

@media screen and (max-width: 424px) {
  .navbar-respond .offcanvas-title {
    width: 120px;
  }
}
/* ============================
    03.03 banner css 
=============================== */
.home-two-banner {
  background-image: url("../images/home-two/banner-bg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: hsl(var(--two-section));
  padding-top: 200px;
}

@media (max-width: 991.98px) {
  .home-two-banner {
    padding-top: 0;
  }
}

@media (max-width: 991.98px) {
  .home-two-banner .content {
    padding: 170px 0 100px;
  }
}

@media (max-width: 767.98px) {
  .home-two-banner .content {
    max-width: 400px;
  }
}

.home-two-banner .content h1 {
  color: hsl(var(--white));
  font-size: 75px;
  font-weight: 700;
  line-height: 1.1;
}

@media (max-width: 1399.98px) {
  .home-two-banner .content h1 {
    font-size: 55px;
  }
}

@media (max-width: 767.98px) {
  .home-two-banner .content h1 {
    font-size: 40px;
  }
}

.home-two-banner .content p {
  color: #e8e8e9;
  padding: 15px 0 35px;
}

.home-two-banner .content .banner-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 50px;
}

.home-two-banner .content .get-started-btn {
  color: hsl(var(--white));
  text-align: center;
  font-family: "inter";
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 16px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  overflow: hidden;
  background: hsl(var(--primary));
}

@media screen and (max-width: 424px) {
  .home-two-banner .content .get-started-btn {
    font-size: 14px;
    padding: 12px 20px;
  }
}

.home-two-banner .content .get-started-btn::before {
  content: "";
  background: #0c2b47;
  width: 0;
  height: 100%;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: -1;
  border: 1px solid transparent;
}

.home-two-banner .content .get-started-btn:hover {
  -webkit-box-shadow: 0px 6px 15px rgba(255, 255, 255, 0.1);
  box-shadow: 0px 6px 15px rgba(255, 255, 255, 0.1);
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

.home-two-banner .content .get-started-btn:hover::before {
  width: 100%;
  opacity: 1;
}

.home-two-banner .banner-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 70px 0;
}

@media (max-width: 991.98px) {
  .home-two-banner .banner-right {
    display: none;
  }
}

.home-two-banner .banner-right .banner-img-item {
  gap: 24px;
}

.home-two-banner .banner-right .banner-img-item img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.home-two-banner .banner-right .banner-img-item img:nth-child(2) {
  margin-top: 24px;
}

.home-two-banner .banner-right .banner-img-item .alltuchtopdown-shape {
  -webkit-animation: alltuchtopdown 3500ms ease-out infinite;
  animation: alltuchtopdown 3500ms ease-out infinite;
  margin-left: -20px;
  margin-top: 40px;
}

.home-two-banner .banner-right .banner-img-item .round-shape {
  -webkit-animation: rotatedHalf 4500ms ease-out infinite;
  animation: rotatedHalf 4500ms ease-out infinite;
  margin-left: -20px;
}

.home-two-banner .banner-right .banner-img-item .image-effect {
  border-radius: 0;
}

.home-two-banner .banner-right .banner-img-item .image-effect:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.home-two-banner .banner-right .banner-img-item:nth-child(1) {
  margin-top: 60px;
}

.home-two-banner .banner-right .banner-img-item:nth-child(1) .image-effect {
  border-radius: 0px 0px 200px 200px;
}

.home-two-banner .banner-right .banner-img-item:nth-child(2) {
  margin-top: 30px;
}

.home-two-banner .banner-right .banner-img-item:nth-child(2) .image-effect {
  border-radius: 200px 200px 0px 0px;
}

.home-two-banner
  .banner-right
  .banner-img-item:nth-child(2)
  .image-effect:last-child {
  border-radius: 0px 0px 200px 200px;
  -webkit-transform: translateX(-10px);
  transform: translateX(-10px);
  margin-top: 24px;
}

.home-two-banner .banner-right .banner-img-item:nth-child(3) .image-effect {
  border-radius: 0px 0px 200px 200px;
}

.home-two-banner .banner__shape svg {
  position: absolute;
}

.home-two-banner .banner__shape svg:nth-child(1) {
  top: 50px;
  fill: hsl(var(--two-section));
  -webkit-animation: pulse-border 1500ms ease-out infinite;
  animation: pulse-border 1500ms ease-out infinite;
}

.home-two-banner .banner__shape svg:nth-child(2) {
  top: 60px;
  left: 208px;
  fill: hsl(var(--white));
  -webkit-animation: rotatedHalf 4500ms ease-out infinite;
  animation: rotatedHalf 4500ms ease-out infinite;
}

.video-play-btn {
  z-index: 10;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  display: block;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  position: relative;
}

.video-play-btn::before,
.video-play-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 50px;
  height: 50px;
  background: hsl(var(--primary));
  border-radius: 50%;
}

.video-play-btn::before {
  z-index: 0;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
  animation: pulse-border 1500ms ease-out infinite;
}

.video-play-btn:after {
  z-index: 1;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.video-play-btn i {
  display: block;
  position: relative;
  z-index: 3;
  color: hsl(var(--white));
}

/* ============================
    03.04 who-we css 
=============================== */
.home-two-who-we-area {
  overflow: hidden;
}

.home-two-who-we-area .who-we-img {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.home-two-who-we-area .who-we-img img {
  width: 100%;
  height: auto;
}

.home-two-who-we-area .who-we-img .img-item {
  text-align: center;
}

.home-two-who-we-area .who-we-img .img-item .who-image {
  overflow: hidden;
}

.home-two-who-we-area .who-we-img .img-item .who-image img {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.home-two-who-we-area .who-we-img .img-item .who-image img:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.home-two-who-we-area
  .who-we-img
  .img-item:nth-child(1)
  .who-image:nth-child(1) {
  border-radius: 600px 600px 0px 0px;
}

.home-two-who-we-area
  .who-we-img
  .img-item:nth-child(1)
  .who-image:nth-child(2) {
  width: auto;
  margin: 40px auto 0;
  -webkit-animation: alltuchtopdown 3500ms ease-out infinite;
  animation: alltuchtopdown 3500ms ease-out infinite;
}

.home-two-who-we-area
  .who-we-img
  .img-item:nth-child(1)
  .who-image:nth-child(2)
  img {
  width: 70%;
}

.home-two-who-we-area .who-we-img .img-item:nth-child(2) {
  margin-top: 40px;
  text-align: left;
}

.home-two-who-we-area
  .who-we-img
  .img-item:nth-child(2)
  .who-image:nth-child(1) {
  border-radius: 600px;
  max-width: 218px;
  max-height: 219px;
}

.home-two-who-we-area
  .who-we-img
  .img-item:nth-child(2)
  .who-image:nth-child(2) {
  border-radius: 0px 0px 600px 600px;
  margin-top: 24px;
}

.home-two-who-we-area .content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 23px;
}

@media (max-width: 575.98px) {
  .home-two-who-we-area .content {
    grid-template-columns: 1fr;
  }
}

.home-two-who-we-area .content .content-item {
  background: hsl(var(--white));
  padding: 0px 30px 30px;
  border-radius: 8px;
  margin-top: 15px;
}

.home-two-who-we-area .content .content-item .icon {
  background: hsl(var(--primary));
  display: inline-block;
  border-radius: 0px 0px 100px 100px;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: -15px;
  position: relative;
  z-index: 1;
}

.home-two-who-we-area .content .content-item .icon::before {
  content: "";
  position: absolute;
  top: 0;
  right: -11px;
  width: 11px;
  height: 17px;
  background: #1153c9;
  -webkit-clip-path: polygon(0 1%, 100% 100%, 0% 100%);
  clip-path: polygon(0 1%, 100% 100%, 0% 100%);
}

.home-two-who-we-area .content .content-item .content-text h4 {
  padding: 10px 0;
}

.home-two-who-we-area .content .who-list {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 575.98px) {
  .home-two-who-we-area .content .who-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 374px) {
  .home-two-who-we-area .content .who-list {
    grid-template-columns: 1fr;
  }
}

.home-two-who-we-area .content .who-list li {
  color: #0c2b47;
}

.home-two-who-we-area .content .who-list li i {
  color: hsl(var(--primary));
}

/* ============================
    03.05 services css 
=============================== */
.home-two-services-area {
  background: hsl(var(--gray5-l-500));
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.home-two-services-area::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 230px;
  /* background-color: var(--background-color); */
  z-index: -1;
}

.home-two-services-area .services-title-shape {
  white-space: nowrap;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.0625rem;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9.0625rem;
  font-style: normal;
  font-weight: 800;
  position: absolute;
  top: 0%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  /* color: rgba(255, 255, 255, 0.1); */
}

.home-two-services-area.services-pages-area {
  background: none;
}

.home-two-services-area .section-title-two p {
  color: hsl(var(--gray5));
}

.home-two-services-area .services-item {
  border-radius: 0px 0px 12px 12px;
  background: hsl(var(--white));
  color: #fff;
  -webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.home-two-services-area .services-item:hover {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

.home-two-services-area .services-item:hover .img {
  border-radius: 0;
}

.home-two-services-area .services-item:hover .img img {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.home-two-services-area .services-item .img {
  border-radius: 0px 0px 600px 600px;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.home-two-services-area .services-item .img img {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.home-two-services-area .services-item .content {
  text-align: center;
  padding: 0 30px 30px;
}

.home-two-services-area .services-item .content .icon {
  width: 87px;
  height: 87px;
  border-radius: 100%;
  border: 5px solid hsl(var(--white));
  background: #0c2b47;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 auto;
  margin-top: -41px;
  z-index: 1;
  position: relative;
}

.home-two-services-area .services-item .content h4 {
  font-family: "Inter";
  padding: 15px 0;
}

/* ============================
    03.06 your-business css 
=============================== */
.home-two-your-business-area .business-category {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 65px;
}

@media (max-width: 991.98px) {
  .home-two-your-business-area .business-category {
    gap: 24px;
  }
}

@media (max-width: 575.98px) {
  .home-two-your-business-area .business-category {
    display: grid;
  }
}

.home-two-your-business-area .business-category .border-tt {
  width: 4px;
  height: 132px;
  background: hsl(var(--primary));
}

@media (max-width: 575.98px) {
  .home-two-your-business-area .business-category .border-tt {
    display: none;
  }
}

.home-two-your-business-area .business-category .nav {
  display: grid;
  gap: 20px;
}

.home-two-your-business-area .business-category .business-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: left;
  background: hsl(var(--white));
  border-radius: 100px 0px 0px 100px;
  padding: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  position: relative;
  z-index: 1;
}

.home-two-your-business-area .business-category .business-btn::after {
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 0%;
  background: hsl(var(--primary));
  right: -33px;
  opacity: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.home-two-your-business-area .business-category .business-btn.active,
.home-two-your-business-area .business-category .business-btn:hover {
  background: hsl(var(--primary));
  border-radius: 0px 100px 100px 0px;
}

.home-two-your-business-area .business-category .business-btn.active::after,
.home-two-your-business-area .business-category .business-btn:hover::after {
  opacity: 1;
  height: 100%;
}

.home-two-your-business-area .business-category .business-btn.active .icon,
.home-two-your-business-area .business-category .business-btn:hover .icon {
  border-right: 2px dashed rgba(0, 0, 0, 0.2);
}

.home-two-your-business-area .business-category .business-btn.active .icon img,
.home-two-your-business-area .business-category .business-btn:hover .icon img {
  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(129deg)
    brightness(160%) contrast(103%);
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(129deg)
    brightness(160%) contrast(103%);
}

.home-two-your-business-area
  .business-category
  .business-btn.active
  .text
  .fs-20,
.home-two-your-business-area
  .business-category
  .business-btn:hover
  .text
  .fs-20 {
  color: hsl(var(--white));
}

.home-two-your-business-area .business-category .business-btn.active .text p,
.home-two-your-business-area .business-category .business-btn:hover .text p {
  color: hsl(var(--white));
}

.home-two-your-business-area .business-category .business-btn .icon {
  border-right: 2px dashed rgba(0, 0, 0, 0.1);
  width: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.home-two-your-business-area .business-category .business-btn .icon img {
  height: 34px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.home-two-your-business-area .business-category .business-btn .text {
  padding: 15px 24px;
}

.home-two-your-business-area .business-category .business-btn .text .fs-20 {
  font-size: 18px;
  font-weight: 600;
  color: #0c2b47;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.home-two-your-business-area .business-category .business-btn .text p {
  color: hsl(var(--gray3));
  font-size: 14px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

@media (max-width: 575.98px) {
  .home-two-your-business-area .business-category .business-category-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media screen and (max-width: 374px) {
  .home-two-your-business-area .business-category .business-category-content {
    display: grid;
    gap: 30px;
    text-align: center;
  }
}

.home-two-your-business-area .business-category .business-category-content ul {
  display: grid;
  gap: 10px;
}

.home-two-your-business-area
  .business-category
  .business-category-content
  ul
  li {
  font-size: 16px;
  font-weight: 600;
  color: #0c2b47;
}

.home-two-your-business-area
  .business-category
  .business-category-content
  ul
  li
  i {
  color: hsl(var(--primary));
}

.home-two-your-business-area
  .business-category
  .business-category-content
  .yeas-title {
  border: 5px solid hsl(var(--primary));
  font-size: 75px;
  display: grid;
  font-family: "Fraunces";
  color: hsl(var(--black));
  font-weight: 700;
  max-width: 172px;
  margin-top: 15px;
  padding: 20px;
  line-height: 56px;
}

@media (max-width: 575.98px) {
  .home-two-your-business-area
    .business-category
    .business-category-content
    .yeas-title {
    margin: 0 auto;
    padding: 10px 15px;
  }
}

@media screen and (max-width: 374px) {
  .home-two-your-business-area
    .business-category
    .business-category-content
    .yeas-title {
    margin-right: auto;
  }
}

.home-two-your-business-area
  .business-category
  .business-category-content
  .yeas-title
  span {
  font-family: "Inter";
  font-size: 20px;
  font-weight: 600;
  color: #0c2b47;
  line-height: 1.3;
  padding-top: 10px;
}

.home-two-your-business-area .business-right {
  position: relative;
  margin-left: 60px;
}

.home-two-your-business-area .business-right::before {
  content: "";
  position: absolute;
  top: 43%;
  left: -60px;
  width: 15px;
  height: 243px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='243' viewBox='0 0 15 243' fill='none'%3E%3Crect x='11' width='4' height='243' fill='%23266FF2'/%3E%3Crect width='4' height='132' fill='%23266FF2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  display: none;
}

.home-two-your-business-area .business-right .business-video {
  position: absolute;
  top: 60px;
  left: -60px;
  border: 10px solid hsl(var(--white));
  border-radius: 100px;
  overflow: hidden;
  z-index: 2;
}

@media (max-width: 575.98px) {
  .home-two-your-business-area .business-right .business-video img {
    width: 100px;
  }
}

.home-two-your-business-area .business-right .business-video::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(38, 111, 242, 0.67);
}

.home-two-your-business-area .business-right .business-video .video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: hsl(var(--primary));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 30px;
  color: hsl(var(--white));
  cursor: pointer;
}

.home-two-your-business-area .business-right .business-video .video-play-btn i {
  font-size: 16px;
}

.home-two-your-business-area .business-right .business-info {
  position: relative;
  z-index: 1;
  border-radius: 600px 600px 0px 0px;
  overflow: hidden;
}

.home-two-your-business-area .business-right .business-info:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.home-two-your-business-area .business-right .business-info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(29.71%, rgba(255, 255, 255, 0)),
    color-stop(72.44%, rgba(0, 15, 92, 0.77))
  );
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 29.71%,
    rgba(0, 15, 92, 0.77) 72.44%
  );
  z-index: 1;
}

.home-two-your-business-area .business-right .business-info img {
  width: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.home-two-your-business-area .business-right .business-info .info-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 24px;
  padding: 40px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

@media (max-width: 575.98px) {
  .home-two-your-business-area .business-right .business-info .info-text {
    padding: 20px;
  }
}

.home-two-your-business-area .business-right .business-info .info-text img {
  width: 75px;
  height: 75px;
}

/* ============================
    03.07 project css 
=============================== */
.home-two-project-area {
  background: hsl(var(--two-section));
  position: relative;
  z-index: 1;
}

.home-two-project-area::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/home-two/project-shape.png");
  z-index: -1;
}

.home-two-project-area .btn-project {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--white));
  background: hsl(var(--primary));
}

.home-two-project-area .btn-project:hover {
  background-color: transparent;
  color: hsl(var(--white));
}

.home-two-project-area .btn-project:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.home-two-project-area .btn-project::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: hsl(var(--secondary));
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.home-two-project-area .project-item {
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.home-two-project-area .project-item:hover .content {
  bottom: 40px;
}

.home-two-project-area .project-item:hover .content {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}

.home-two-project-area .project-item .image {
  height: 100%;
}

.home-two-project-area .project-item .image .image-effect {
  height: 430px;
}

.home-two-project-area .project-item .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.home-two-project-area .project-item .content {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  text-align: center;
  padding: 20px 30px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background: none;
  background: hsl(var(--secondary) / 0.7);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  width: 80%;
  margin: 0 auto;
  border-radius: 10px;
}

.home-two-project-area .project-item .content::before {
  display: none;
}

.home-two-project-area .project-item .content button {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--white));
  padding: 5px 10px;
  background: hsl(var(--primary));
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 14px;
}

.home-two-project-area .project-item .content button:hover {
  background-color: transparent;
  color: hsl(var(--white));
}

.home-two-project-area .project-item .content button:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.home-two-project-area .project-item .content button::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: hsl(var(--secondary));
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

.home-two-project-area .project-item .content h6 {
  font-size: 20px;
  color: hsl(var(--white));
  font-family: "Inter";
  line-height: 26px;
  font-weight: 500;
}

/* ============================
    03.08 pricing css
=============================== */
.home-two-pricing-area .project-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 30px;
  background: #f8fbff;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  max-width: 276px;
  margin: 50px auto;
  padding: 7px;
}

.home-two-pricing-area .project-nav button {
  font-size: 20px;
  color: hsl(var(--gray3));
  font-weight: 500;
  border-radius: 32.912px;
  padding-left: 30px;
  padding-right: 30px;
}

.home-two-pricing-area .project-nav button.active {
  background: hsl(var(--white));
  -webkit-box-shadow: 0px 6.582px 26.33px 0px rgba(18, 2, 47, 0.1);
  box-shadow: 0px 6.582px 26.33px 0px rgba(18, 2, 47, 0.1);
  color: hsl(var(--secondary));
}

.home-two-pricing-area .pricing__row .col-lg-4:nth-child(2) .pricing-item {
  background: hsl(var(--primary));
}

.home-two-pricing-area
  .pricing__row
  .col-lg-4:nth-child(2)
  .pricing-item
  .pricing__head__btn {
  color: hsl(var(--white));
}

.home-two-pricing-area
  .pricing__row
  .col-lg-4:nth-child(2)
  .pricing-item
  .pricing__content
  .pricing-number {
  color: hsl(var(--white));
}

.home-two-pricing-area
  .pricing__row
  .col-lg-4:nth-child(2)
  .pricing-item
  .pricing__content
  p {
  color: hsl(var(--gray5));
}

.home-two-pricing-area
  .pricing__row
  .col-lg-4:nth-child(2)
  .pricing-item
  .pricing__content
  ul
  li {
  color: hsl(var(--white));
}

.home-two-pricing-area
  .pricing__row
  .col-lg-4:nth-child(2)
  .pricing-item
  .pricing__content
  ul
  li:nth-child(odd) {
  background: hsl(var(--white) / 0.04);
}

.home-two-pricing-area
  .pricing__row
  .col-lg-4:nth-child(2)
  .pricing-item
  .pricing-btn {
  color: hsl(var(--white));
}

.home-two-pricing-area .pricing-item {
  background: hsl(var(--white) / 0.1);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 10px;
  border: 1px solid hsl(var(--border-color));
  position: relative;
  z-index: 1;
  padding: 40px 40px 50px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

@media screen and (max-width: 1199px) {
  .home-two-pricing-area .pricing-item {
    padding: 30px 25px 40px;
  }
}

@media (max-width: 767.98px) {
  .home-two-pricing-area .pricing-item {
    padding: 30px 20px 40px;
  }
}

.home-two-pricing-area .pricing-item .pricing__head__btn {
  font-size: 30px;
  font-weight: 700;
  color: hsl(var(--secondary));
  margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
  .home-two-pricing-area .pricing-item .pricing__head__btn {
    font-size: 1.25rem;
  }
}

.home-two-pricing-area .pricing-item .pricing__content .pricing-number {
  font-family: "Fraunces";
  font-size: 50px;
  color: hsl(var(--primary));
  font-weight: 700;
  line-height: 1.3;
}

@media screen and (max-width: 767px) {
  .home-two-pricing-area .pricing-item .pricing__content .pricing-number {
    font-size: 1.875rem;
  }
}

.home-two-pricing-area .pricing-item .pricing__content .pricing-number sup {
  font-size: 35px;
}

@media screen and (max-width: 767px) {
  .home-two-pricing-area .pricing-item .pricing__content .pricing-number sup {
    font-size: 1.25rem;
  }
}

.home-two-pricing-area .pricing-item .pricing__content p {
  color: hsl(var(--secondary));
  font-size: 16px;
  display: inline-block;
  font-family: var(--body-font);
}

.home-two-pricing-area .pricing-item .pricing__content ul {
  text-align: left;
  display: grid;
  gap: 5px;
  margin: 30px 0;
}

.home-two-pricing-area .pricing-item .pricing__content ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  font-size: 1.125rem;
  gap: 5px;
  color: hsl(var(--gray3));
  padding: 10px;
  border-radius: 10px;
}

@media screen and (max-width: 1199px) {
  .home-two-pricing-area .pricing-item .pricing__content ul li {
    font-size: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .home-two-pricing-area .pricing-item .pricing__content ul li {
    font-size: 1rem;
  }
}

.home-two-pricing-area .pricing-item .pricing__content ul li:nth-child(odd) {
  background: hsl(var(--primary) / 0.03);
}

.home-two-pricing-area .pricing-item .pricing__content ul li .las {
  background: hsl(var(--white) / 0.9);
  padding: 3px;
  border-radius: 5px;
  margin-right: 5px;
}

.home-two-pricing-area .pricing-item .pricing__content ul li .la-check {
  color: hsl(var(--success));
}

.home-two-pricing-area .pricing-item .pricing__content ul li .la-times {
  color: hsl(var(--danger));
}

.home-two-pricing-area .pricing-item .pricing-btn {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--white));
  background: hsl(var(--white) / 0.1);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-box-shadow: 0px 6.582px 26.33px 0px rgba(18, 2, 47, 0.05);
  box-shadow: 0px 6.582px 26.33px 0px rgba(18, 2, 47, 0.05);
  width: 100%;
  position: relative;
  text-align: center;
  font-size: 18px;
  border-radius: 10px;
  color: hsl(var(--secondary));
  padding: 15px 10px;
}

.home-two-pricing-area .pricing-item .pricing-btn:hover {
  background-color: transparent;
  color: hsl(var(--white));
}

.home-two-pricing-area .pricing-item .pricing-btn:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.home-two-pricing-area .pricing-item .pricing-btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: hsl(var(--secondary));
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

/* ============================
    03.09 consulting-services css 
=============================== */
.home-two-consulting-services-area {
  position: relative;
  z-index: 1;
  background-image: url(../images/home-one/services-bg.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-two-consulting-services-area .consulting-services-img {
  position: relative;
}

.home-two-consulting-services-area .consulting-services-img .image {
  position: relative;
  z-index: 1;
  padding-left: 30px;
  padding-right: 30px;
}

.home-two-consulting-services-area .consulting-services-img .image::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 80%;
  border-radius: 600px 600px 0px 0px;
  background-color: #0c2b47;
  background-image: url("../images/home-two/csbg.png");
}

.home-two-consulting-services-area .consulting-services-img .image img {
  width: 100%;
  height: auto;
}

.home-two-consulting-services-area .consulting-services-img .logo-circle {
  position: absolute;
  bottom: -45px;
  left: -45px;
  z-index: 1;
}

@media screen and (max-width: 424px) {
  .home-two-consulting-services-area .consulting-services-img .logo-circle {
    bottom: -65px;
    left: -60px;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
  }
}

.home-two-consulting-services-area .who-we-img {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.home-two-consulting-services-area .who-we-img img {
  width: 100%;
  height: auto;
}

.home-two-consulting-services-area .who-we-img .img-item {
  text-align: center;
}

.home-two-consulting-services-area
  .who-we-img
  .img-item:nth-child(1)
  img:nth-child(1) {
  border-radius: 600px 600px 0px 0px;
}

.home-two-consulting-services-area
  .who-we-img
  .img-item:nth-child(1)
  img:nth-child(2) {
  width: auto;
  margin: 40px auto 0;
  -webkit-animation: alltuchtopdown 3500ms ease-out infinite;
  animation: alltuchtopdown 3500ms ease-out infinite;
}

.home-two-consulting-services-area .who-we-img .img-item:nth-child(2) {
  margin-top: 40px;
  text-align: left;
}

.home-two-consulting-services-area
  .who-we-img
  .img-item:nth-child(2)
  img:nth-child(1) {
  border-radius: 600px;
  max-width: 218px;
  max-height: 219px;
}

.home-two-consulting-services-area
  .who-we-img
  .img-item:nth-child(2)
  img:nth-child(2) {
  border-radius: 0px 0px 600px 600px;
  margin-top: 24px;
}

.home-two-consulting-services-area .content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
  max-width: 500px;
}

@media (max-width: 425.98px) {
  .home-two-consulting-services-area .content {
    grid-template-columns: 1fr;
  }
}

.home-two-consulting-services-area .content .progress-circle-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media (max-width: 425.98px) {
  .home-two-consulting-services-area .content .progress-circle-content {
    display: grid;
    grid-template-columns: 100px 1fr;
  }
}

.home-two-consulting-services-area .content .progress-circle-content .fs-20 {
  color: #082334;
  font-weight: bold;
}

.home-two-consulting-services-area .content .circle-proge {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 1;
}

.home-two-consulting-services-area .content .circle-proge__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84' fill='none'%3E%3Cpath d='M42.4483 4.23762C42.4803 1.91014 44.3981 0.0271184 46.7103 0.294769C54.0427 1.14351 61.0438 3.93619 66.9722 8.41836C74.0254 13.7509 79.1916 21.1963 81.7182 29.6698C84.2448 38.1433 83.9997 47.2021 81.0188 55.5266C78.0379 63.8511 72.4767 71.0064 65.1456 75.9499C57.8145 80.8934 49.0965 83.3669 40.2615 83.0101C31.4266 82.6532 22.9364 79.4847 16.0278 73.9661C9.11926 68.4475 4.1533 60.8671 1.8534 52.3293C-0.0797348 45.153 -0.0444326 37.6155 1.91723 30.4997C2.53583 28.2557 5.00045 27.1835 7.17019 28.0264C9.33994 28.8692 10.3871 31.3085 9.82671 33.5677C8.4811 38.9931 8.52676 44.6952 9.9926 50.1367C11.8255 56.9409 15.7831 62.982 21.2888 67.3801C26.7945 71.7781 33.5607 74.3032 40.6017 74.5876C47.6426 74.872 54.5904 72.9007 60.4329 68.961C66.2754 65.0213 70.7073 59.319 73.0829 52.6849C75.4586 46.0507 75.6538 38.8313 73.6403 32.0784C71.6267 25.3255 67.5096 19.392 61.8886 15.1422C57.3933 11.7436 52.1241 9.56379 46.5899 8.7776C44.2853 8.45022 42.4164 6.56509 42.4483 4.23762Z' fill='%23266FF2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-color: #e3edff;
  z-index: -1;
}

.home-two-consulting-services-area .content .circle-proge__text p {
  font-size: 20px;
  color: hsl(var(--secondary));
  font-weight: 700;
}

.home-two-consulting-services-area .content .content-item {
  background: hsl(var(--white));
  padding: 0px 30px 30px;
  border-radius: 8px;
  margin-top: 15px;
}

.home-two-consulting-services-area .content .content-item .icon {
  background: hsl(var(--primary));
  display: inline-block;
  border-radius: 0px 0px 100px 100px;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: -15px;
  position: relative;
  z-index: 1;
}

.home-two-consulting-services-area .content .content-item .icon::before {
  content: "";
  position: absolute;
  top: 0;
  right: -11px;
  width: 11px;
  height: 17px;
  background: #1153c9;
  -webkit-clip-path: polygon(0 1%, 100% 100%, 0% 100%);
  clip-path: polygon(0 1%, 100% 100%, 0% 100%);
}

.home-two-consulting-services-area .content .who-list {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 425.98px) {
  .home-two-consulting-services-area .content .who-list {
    grid-template-columns: 1fr;
  }
}

.home-two-consulting-services-area .content .who-list li {
  color: #000;
}

.home-two-consulting-services-area .content .who-list li i {
  color: hsl(var(--primary));
}

.consulting-call-btn {
  margin-top: 50px;
}

.consulting-call-btn .call-btn {
  background: #e3edff;
  border: 2px solid #0c2b47;
  border-radius: 100px;
  padding: 10px 20px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  font-family: "Fraunces";
  font-size: 32px;
  font-weight: 700;
  color: #0c2b47;
}

@media screen and (max-width: 1499px) {
  .consulting-call-btn .call-btn {
    font-size: 24px;
  }
}
/* ============================
    03.10 team css
=============================== */
.home-two-team-area .section-title-two p {
  margin: 0 auto;
}

.team-two-item {
  border: 1px solid hsl(var(--border-color));
  border-radius: 12px;
  padding: 30px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.team-two-item:hover {
  background: rgb(8 35 52 / 95%);
}

.team-two-item:hover::before,
.team-two-item:hover::after {
  width: 150px;
  height: 650px;
}

.team-two-item:hover .desecration-title {
  background: hsl(var(--white));
}

.team-two-item:hover .content p,
.team-two-item:hover .content .fs-20 {
  color: hsl(var(--white));
}

.team-two-item:hover .social-links li {
  list-style: none;
}

.team-two-item:hover .social-links a {
  background: hsl(var(--white));
  color: hsl(var(--primary));
}

.team-two-item::before,
.team-two-item::after {
  content: "";
  position: absolute;
  top: -100px;
  left: 30%;
  width: 0;
  height: 0;
  -webkit-transform: rotate(32.015deg);
  transform: rotate(32.015deg);
  background: rgb(8 35 52 / 62%);
  z-index: -1;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.team-two-item::after {
  -webkit-transform: rotate(-32.015deg);
  transform: rotate(-32.015deg);
}

.team-two-item .image {
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 100%;
  background: hsl(var(--gray5));
}

.team-two-item .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.team-two-item .desecration-title {
  background: hsl(var(--gray5) / 0.6);
  border-radius: 100px;
  color: hsl(var(--secondary));
  padding: 8px 15px;
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

@media screen and (max-width: 1199px) {
  .team-two-item .desecration-title {
    font-size: 11px;
    padding: 7px 10px;
  }
}

.team-two-item .desecration-title i {
  font-size: 16px;
}

.team-two-item .content {
  margin: 20px 0 30px;
}

.team-two-item .content .fs-20 {
  color: hsl(var(--secondary));
}

.team-two-item .content p {
  color: hsl(var(--gray3));
  font-size: 16px;
  padding-top: 5px;
}

.team-two-item .social-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
}

.team-two-item .social-links a {
  width: 40px;
  height: 40px;
  color: hsl(var(--gray3));
  background: hsl(var(--gray5) / 0.6);
  border-radius: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.team-two-item .social-links a:hover {
  background: hsl(var(--secondary));
  color: hsl(var(--white));
}

/* ============================
    03.11 client-feedback css
=============================== */
.home-two-client-feedback-area {
  background-image: url("../images/home-one/feedback-bg.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
  background-color: hsl(var(--two-section));
}

.home-two-client-feedback-area .owl-carousel .owl-stage-outer {
  margin-right: -2000px;
}

.home-two-client-feedback-area .feedback-content .section-title p {
  color: hsl(var(--gray4));
  max-width: 389px;
  margin-top: 15px;
}

.home-two-client-feedback-area .feedback-content .client-review {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
}

.home-two-client-feedback-area .feedback-content .client-review .client-img {
  padding-left: 10px;
  padding-right: 10px;
}

.home-two-client-feedback-area
  .feedback-content
  .client-review
  .client-img
  button,
.home-two-client-feedback-area
  .feedback-content
  .client-review
  .client-img
  img {
  width: 50px;
  height: 50px;
  border-radius: 100px;
  border: 2px solid #2f3235;
  margin: 0 -10px;
}

.home-two-client-feedback-area
  .feedback-content
  .client-review
  .client-img
  button {
  background: #373c3f;
  color: hsl(var(--white));
}

.home-two-client-feedback-area .feedback-item {
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: #203644;
  padding: 0 40px 60px;
  text-align: center;
  margin-top: 50px;
}

@media (max-width: 1399.98px) {
  .home-two-client-feedback-area .feedback-item {
    padding: 0 20px 50px;
  }
}

.home-two-client-feedback-area .feedback-item img,
.home-two-client-feedback-area .feedback-item svg {
  margin-top: -50px;
}

.home-two-client-feedback-area .feedback-item p {
  color: var(--gray4);
  font-family: "Fraunces";
  font-size: 20px;
  font-weight: 400;
  margin: 30px 0;
  font-weight: 400;
  line-height: 1.4;
  height: 220px;
  overflow: auto;
  padding-right: 10px;
}

@media (max-width: 1399.98px) {
  .home-two-client-feedback-area .feedback-item p {
    font-size: 20px;
  }
}

.home-two-client-feedback-area .feedback-item .feedback-admin {
  position: relative;
}

.home-two-client-feedback-area .feedback-item .feedback-admin .feedback-name {
  font-size: 20px;
  font-weight: 600;
  color: hsl(var(--white));
}

.home-two-client-feedback-area
  .feedback-item
  .feedback-admin
  .feedback-company {
  font-size: 16px;
  color: hsl(var(--gray4));
}

.home-two-client-feedback-area .arrow-btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  margin: 40px 0;
}

@media (max-width: 1399.98px) {
  .home-two-client-feedback-area .arrow-btn-group {
    margin: 30px 0;
  }
}

.home-two-client-feedback-area .arrow-btn-group button {
  width: 56px;
  height: 56px;
  color: var(--gray3);
  background: #203644;
  border-radius: 5px;
  font-size: 25px;
}

/* ============================
    03.12 blog css
=============================== */
.home-two-blog-area.blog-single-area .blog-item .blog-img .image-effect {
  height: 360px;
  border-radius: 10px;
}

.home-two-blog-area .blog-content {
  display: grid;
}

.home-two-blog-area .blog-content ul {
  list-style: none;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}

.home-two-blog-area .blog-content ul li {
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  color: hsl(var(--secondary) / 0.7);
}

.home-two-blog-area .blog-content ul li:hover {
  color: hsl(var(--primary));
}

.home-two-blog-area .blog-content h4 {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.home-two-blog-area .blog-content h4:hover {
  color: hsl(var(--primary));
}

.home-two-blog-area .section-title {
  padding-bottom: 0px;
}

.home-two-blog-area .section-title p {
  color: hsl(var(--gray3));
  padding: 10px 0 20px;
}

.home-two-blog-area .section-title .btn-blog-post {
  color: hsl(var(--white));
  text-align: center;
  font-family: "inter";
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 16px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
  background: hsl(var(--primary));
}

@media screen and (max-width: 424px) {
  .home-two-blog-area .section-title .btn-blog-post {
    font-size: 14px;
    padding: 12px 20px;
  }
}

.home-two-blog-area .section-title .btn-blog-post::before {
  content: "";
  background: hsl(var(--secondary));
  width: 0;
  height: 100%;
  opacity: 0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: -1;
  border: 1px solid transparent;
}

.home-two-blog-area .section-title .btn-blog-post:hover {
  -webkit-box-shadow: 0px 6px 15px rgba(255, 255, 255, 0.1);
  box-shadow: 0px 6px 15px rgba(255, 255, 255, 0.1);
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

.home-two-blog-area .section-title .btn-blog-post:hover::before {
  width: 100%;
  opacity: 1;
}

.home-two-blog-area .blog-item {
  border-radius: 16px;
  background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      from(#fff),
      to(#fff)
    ),
    -webkit-gradient(linear, left bottom, left top, from(#fff), to(#fff)),
    -webkit-gradient(linear, left bottom, left top, from(#fff), to(#fff)), #fff;
  background: linear-gradient(0deg, #fff 0%, #fff 100%),
    linear-gradient(0deg, #fff 0%, #fff 100%),
    linear-gradient(0deg, #fff 0%, #fff 100%), #fff;
  padding: 15px;
}

.home-two-blog-area .blog-item:hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.home-two-blog-area .blog-item .blog-img {
  position: relative;
  border-radius: 16px;
}

.home-two-blog-area .blog-item .blog-img .image-effect {
  height: 270px;
  border-radius: 10px;
}

.home-two-blog-area .blog-item .blog-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.home-two-blog-area .blog-item .blog-content {
  margin-top: 20px;
  display: inline-block;
}

@media screen and (max-width: 991px) {
  .home-two-blog-area .blog-item .blog-content {
    display: grid;
  }
}

@media screen and (max-width: 575px) {
  .home-two-blog-area .blog-item .blog-content {
    margin-top: 30px;
  }
}

.home-two-blog-area .blog-item .blog-content .business-btn {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  background: #0c2b47;
  color: hsl(var(--white));
  padding: 10px 20px;
  display: inline-block;
  margin-top: 15px;
}

.home-two-blog-area .blog-item .blog-content .business-btn:hover {
  background-color: #082334;
  color: #ffffff;
}

.home-two-blog-area .blog-item .blog-content .business-btn:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.home-two-blog-area .blog-item .blog-content .business-btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: hsl(var(--secondary));
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

@media screen and (max-width: 575px) {
  .home-two-blog-area .blog-item .blog-content .business-btn {
    margin-top: 0px;
  }
}

.home-two-blog-area .blog-item .blog-content h5 {
  font-weight: 700;
  font-family: "Inter";
  color: #082334;
  margin-top: 6px;
}

.home-two-blog-area .blog-item .blog-content h5:hover {
  color: #0c2b47;
}

@media screen and (max-width: 991px) {
  .home-two-blog-area .blog-item .blog-content h5 {
    padding: 0;
  }
}

.add-dt {
  text-align: center;
  background: hsl(var(--primary));
  position: absolute;
  bottom: -27px;
  right: 20px;
  min-width: 130px;
  border-radius: 10px;
  overflow: hidden;
}

@media screen and (max-width: 1199px) {
  .add-dt {
    bottom: 0px;
    right: 0px;
  }
}

.add-dt .day {
  color: hsl(var(--white));
  font-family: "Fraunces";
  font-size: 32px;
  font-weight: 700;
}

.add-dt .month {
  background: hsl(var(--secondary));
  display: block;
  color: hsl(var(--white));
  font-size: 14px;
  font-weight: 600;
  line-height: 27px;
}

/* ============================
    02.14 company logo css 
=============================== */
.home-two-company-logo-area .company-logo-content {
  display: grid;
  grid-template-columns: repeat(6, 2fr);
  background: hsl(var(--white));
  border-left: 1px solid rgba(14, 0, 0, 0.1);
  border-top: 1px solid rgba(14, 0, 0, 0.1);
}

@media (max-width: 991.98px) {
  .home-two-company-logo-area .company-logo-content {
    grid-template-columns: repeat(4, 2fr);
  }
}

@media (max-width: 575.98px) {
  .home-two-company-logo-area .company-logo-content {
    grid-template-columns: repeat(3, 2fr);
  }
}

.home-two-company-logo-area .company-logo-content .com-logo {
  width: 100%;
  height: 130px;
  background: var(--white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-right: 1px solid rgba(14, 0, 0, 0.1);
  border-bottom: 1px solid rgba(14, 0, 0, 0.1);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  padding: 0 30px;
}

@media (max-width: 991.98px) {
  .home-two-company-logo-area .company-logo-content .com-logo {
    padding: 0 10px;
  }
}

@media screen and (max-width: 575px) {
  .home-two-company-logo-area .company-logo-content .com-logo {
    height: 100px;
  }
}

.home-two-company-logo-area .company-logo-content .com-logo:hover {
  background: hsl(var(--primary));
}

.home-two-company-logo-area .company-logo-content .com-logo:hover img {
  -webkit-filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(49deg)
    brightness(8) contrast(104%);
  filter: invert(100%) sepia(3%) saturate(13%) hue-rotate(49deg) brightness(8)
    contrast(104%);
}

.home-two-company-logo-area .company-logo-content .com-logo img {
  aspect-ratio: 3/2.3;
  -o-object-fit: contain;
  object-fit: contain;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

@media (max-width: 991.98px) {
  .home-two-company-logo-area .company-logo-content .com-logo img {
    aspect-ratio: 3/2;
  }
}
/* ============================
    03.15 footer  css 
=============================== */
.home-two-footer-area {
  background-color: hsl(var(--two-section));
}

.home-two-footer-area .footer-call-to-address {
  padding: 40px 0;
}

.home-two-footer-area .footer-call-to-address .text .fs-18 {
  color: hsl(var(--white));
}

.home-two-footer-area .footer-call-to-address .text a {
  font-family: "Fraunces";
  font-size: 32px;
  font-weight: 700;
}

.home-two-footer-area .footer-call-to-address .content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 15px;
}

@media (max-width: 767.98px) {
  .home-two-footer-area .footer-call-to-address .content {
    grid-template-columns: 1fr;
  }
}

.home-two-footer-area .footer-call-to-address .adders-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}

.home-two-footer-area .footer-call-to-address .adders-item:hover .adders-icon {
  background: hsl(var(--primary));
}

.home-two-footer-area .footer-call-to-address .adders-item .adders-icon {
  min-width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 100px;
  font-size: 24px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

@media (max-width: 991.98px) {
  .home-two-footer-area .footer-call-to-address .adders-item .adders-icon {
    min-width: 50px;
    height: 50px;
  }
}

.home-two-footer-area .footer-call-to-address .adders-item .adders-text .fs-18 {
  color: hsl(var(--white));
}

.home-two-footer-area .footer-call-to-address .adders-item .adders-text a,
.home-two-footer-area .footer-call-to-address .adders-item .adders-text p {
  color: hsl(var(--gray4));
}

@media (max-width: 991.98px) {
  .home-two-footer-area .footer-call-to-address .adders-item .adders-text a,
  .home-two-footer-area .footer-call-to-address .adders-item .adders-text p {
    font-size: 14px;
  }
}

.home-two-footer-area .footer-wedget-area {
  background-image: url("../images/home-two/footer-bg.png");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 70px 0 70px;
}

.home-two-footer-area .footer-wedget-area .addres-text p {
  color: hsl(var(--gary4));
  padding: 20px 0;
}

.home-two-footer-area .footer-wedget-area .addres-text .social-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 350px;
}

.home-two-footer-area .footer-wedget-area .addres-text .social-list a {
  color: hsl(var(--white));
  font-size: 16px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.home-two-footer-area .footer-wedget-area .addres-text .social-list a:hover {
  color: hsl(var(--primary));
}

.home-two-footer-area .footer-wedget-area .wedget-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.home-two-footer-area
  .footer-wedget-area
  .wedget-content
  .wedget-item
  .wedget-title {
  color: hsl(var(--white));
  font-family: "Inter";
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.home-two-footer-area
  .footer-wedget-area
  .wedget-content
  .wedget-item
  .wedget-list {
  display: grid;
  gap: 15px;
}

.home-two-footer-area
  .footer-wedget-area
  .wedget-content
  .wedget-item
  .wedget-list
  a {
  position: relative;
  font-size: 16px;
  font-family: "Inter";
  color: hsl(var(--gray5));
  padding-left: 20px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.home-two-footer-area
  .footer-wedget-area
  .wedget-content
  .wedget-item
  .wedget-list
  a:hover {
  color: hsl(var(--primary));
}

.home-two-footer-area
  .footer-wedget-area
  .wedget-content
  .wedget-item
  .wedget-list
  a:hover:before {
  width: 15px;
}

.home-two-footer-area
  .footer-wedget-area
  .wedget-content
  .wedget-item
  .wedget-list
  a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: hsl(var(--primary));
  border-radius: 50px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.home-two-footer-area
  .footer-wedget-area
  .wedget-content
  .wedget-item
  .newsletter
  p {
  color: hsl(var(--gray4));
}

.home-two-footer-area
  .footer-wedget-area
  .wedget-content
  .wedget-item
  .newsletter
  p
  span {
  color: hsl(var(--primary));
}

.home-two-footer-area
  .footer-wedget-area
  .wedget-content
  .wedget-item
  .newsletter
  form {
  position: relative;
  margin-top: 20px;
}

.home-two-footer-area
  .footer-wedget-area
  .wedget-content
  .wedget-item
  .newsletter
  form
  input {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  height: 50px;
  width: 100%;
  padding: 10px 50px 10px 15px;
  color: hsl(var(--white));
}

.home-two-footer-area
  .footer-wedget-area
  .wedget-content
  .wedget-item
  .newsletter
  form
  button {
  color: hsl(var(--white));
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.home-two-footer-area .copyright {
  border: none;
  background: none;
  font-size: 16px;
  text-align: center;
  padding: 24px 0;
}

.home-two-footer-area .copyright p {
  color: hsl(var(--gray5));
}

/* ============================
    Breadcrumb css 
=============================== */
.breadcrumb-area {
  background-image: url("../images/banner_internos/banner_lake_atitlan.webp");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: hsl(var(--two-section));
  padding: 230px 0 80px;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 991px) {
  .breadcrumb-area {
    padding: 140px 0 80px;
  }
}

.breadcrumb-area:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(8 35 52 / 64%);
  z-index: -1;
}

.breadcrumb-area .breadcrumb__wrapper {
  text-align: center;
}

.breadcrumb-area .breadcrumb__title {
  margin-bottom: 10px;
  color: hsl(var(--white));
  font-size: 3rem;
}

@media screen and (max-width: 991px) {
  .breadcrumb-area .breadcrumb__title {
    font-size: 2.25rem;
  }
}

@media screen and (max-width: 767px) {
  .breadcrumb-area .breadcrumb__title {
    font-size: 1.875rem;
  }
}

.breadcrumb-area .breadcrumb__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
}

.breadcrumb-area .breadcrumb__list a {
  color: hsl(var(--white));
}

.breadcrumb-area .breadcrumb__list span {
  color: hsl(var(--primary));
}

/* ============================
    Services Details css 
=============================== */
.services-details-area .services-details__category {
  display: grid;
  gap: 10px;
}

.services-details-area .services-details__category .image-effect {
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
}

.services-details-area .services-details__category p {
  text-align: justify;
}

.services-details-area .services-details__category .services-details__content {
  display: grid;
  /* grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); */
  gap: 24px;
}

@media (max-width: 575.98px) {
  .services-details-area
    .services-details__category
    .services-details__content {
    grid-template-columns: 1fr;
  }
}

.services-details-area
  .services-details__category
  .services-details__content
  h4,
.services-details-area
  .services-details__category
  .services-details__content
  .h4 {
  font-family: "Inter";
  margin-bottom: 15px;
}

.services-details-area
  .services-details__category
  .services-details__content
  ul,
ul.category-list {
  display: grid;
  gap: 10px;
}

.services-details-area
  .services-details__category
  .services-details__content
  ul
  li,
ul.category-list li {
  color: hsl(var(--gray3));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.services-details-area
  .services-details__category
  .services-details__content
  .progress-card {
  background: hsl(var(--white));
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  /* grid-template-columns: 90px 1fr; */
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  padding: 30px;
}

@media (max-width: 575.98px) {
  .services-details-area
    .services-details__category
    .services-details__content
    .progress-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (min-width: 1200px) {
  .services-details-area
    .services-details__category
    .services-details__content
    .progress-card {
    flex-direction: row;
  }
}

.services-details-area
  .services-details__category
  .services-details__content
  .progress-card
  .progress-description {
  color: hsl(var(--gray3));
}

.services-details-area
  .services-details__category
  .services-details__content
  .progress-card
  .progress-container {
  min-width: 80px;
  height: 80px;
  margin: 0 auto;
}

.services-details-area
  .services-details__category
  .services-details__content
  .progress-card
  .progress-container
  .progress-canvas {
  width: 80px;
}

.sidebar-content {
  display: grid;
  gap: 24px;
}

.sidebar-content .search-box {
  position: relative;
}

.sidebar-content .search-box input {
  padding: 12px 30px;
  padding-right: 50px;
  border: 0;
  outline: none;
  border-radius: 10px;
  background: hsl(var(--white));
  width: 100%;
  height: 65px;
  border-radius: 1px solid #e8e8e8;
}

.sidebar-content .search-box input::-webkit-input-placeholder {
  color: hsl(var(--gray3));
}

.sidebar-content .search-box input::-moz-placeholder {
  color: hsl(var(--gray3));
}

.sidebar-content .search-box input:-ms-input-placeholder {
  color: hsl(var(--gray3));
}

.sidebar-content .search-box input::-ms-input-placeholder {
  color: hsl(var(--gray3));
}

.sidebar-content .search-box input::placeholder {
  color: hsl(var(--gray3));
}

.sidebar-content .search-box button {
  color: #4a4a4a42;
  position: absolute;
  right: 0px;
  padding: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.sidebar-content .services-details__sidebar {
  background: hsl(var(--white));
  border-radius: 10px;
  padding: 30px;
}

.sidebar-content .services-details__sidebar .sidebar__title {
  font-family: "Inter";
  color: #082334;
}

.sidebar-content .services-details__sidebar .sidebar__list {
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 10px;
}

.sidebar-content .services-details__sidebar .sidebar__list li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sidebar-content .services-details__sidebar .sidebar__list li:last-child {
  border: 0;
}

.sidebar-content .services-details__sidebar .sidebar__list li a {
  color: hsl(var(--black));
  font-size: 16px;
  padding: 10px 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: block;
}

.sidebar-content .services-details__sidebar .sidebar__list li a:hover {
  color: hsl(var(--primary));
}

.sidebar-content .services-details__sidebar.details-tags .sidebar__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 20px;
}

.sidebar-content .services-details__sidebar.details-tags .sidebar__list li {
  border: 0;
}

.sidebar-content .services-details__sidebar.details-tags .sidebar__list a {
  border-radius: 4px;
  border: 1px solid hsl(var(--border-color));
  background: hsl(var(--white));
  padding: 5px 10px;
}

.sidebar-content
  .services-details__sidebar.details-tags
  .sidebar__list
  a:hover {
  color: hsl(var(--white));
  background: #0c2b47;
  border-color: #0c2b47;
}

.sidebar-content .project-info-sidebar {
  border-radius: 10px;
  background: hsl(var(--white));
  padding: 40px 30px;
}

.sidebar-content .project-info-sidebar .sidebar__title {
  font-family: "Inter";
  color: hsl(var(--secondary));
}

.sidebar-content .project-info-sidebar .sidebar__list {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.sidebar-content .project-info-sidebar .fs-20 {
  color: hsl(var(--secondary));
  font-weight: 600;
}

.sidebar-content .project-info-sidebar .fs-16 {
  color: hsl(var(--gray3));
}

.sidebar-content .call-info-box {
  background-color: hsl(var(--primary));
  border-radius: 10px;
  text-align: center;
  padding: 50px 30px 45px;
  color: hsl(var(--white));
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.sidebar-content .call-info-box:hover {
  background: hsl(var(--secondary));
}

.sidebar-content .call-info-box h3 {
  color: hsl(var(--white));
  margin-top: 5px;
}

.sidebar-content .download-btn a {
  color: hsl(var(--white));
  background: hsl(var(--secondary));
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 20px;
  gap: 10px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.sidebar-content .download-btn a:hover {
  background: hsl(var(--primary));
}

.progress-container {
  position: relative;
  min-width: 100px;
  height: 100px;
}

.progress-canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.pagination-content {
  gap: 10px;
}

.pagination-content .page-link {
  border: 1px solid hsl(var(--border-color));
  background: no-repeat;
  border-radius: 100px !important;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: hsl(var(--gray3));
  font-size: 18px;
}

.pagination-content .page-link.active,
.pagination-content .page-link:hover {
  color: hsl(var(--white));
  background: hsl(var(--primary));
}

/* ============================
    all project css 
=============================== */
.all-project-area {
  background: none;
}

.all-project-area::after {
  display: none;
}

.all-project-two {
  background: none;
}

.all-project-two .col-xl-3 {
  display: grid;
  gap: 24px;
}

.all-project-two .col-xl-3:nth-child(even) {
  margin-top: 50px;
}

/* ============================
    blog details css 
=============================== */
.blog-details-area .blog-item {
  background: hsl(var(--white));
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.blog-details-area .blog-item .blog-img img {
  width: 100%;
}

.blog-details-area .blog-content {
  padding: 30px;
  display: grid;
  gap: 20px;
}

.blog-details-area .blog-content p {
  text-align: justify;
}

.blog-details-area .blog-content .business-bt,
.services-details-area .business-btn {
  background: hsl(var(--primary));
  border-radius: 5px;
  color: hsl(var(--white));
  padding: 0px 8px;
  display: inline-block;
}

.blog-details-area .blog-content img {
  border-radius: 10px;
}

.blog-details-area .blog-content .category-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.blog-details-area .blog-content .category-list li {
  font-size: 18px;
  /* color: hsl(var(--secondary)); */
  /* font-weight: 500; */
}

.blog-details-area .blog-content .post-tags span {
  padding-right: 10px;
}

.blog-details-area .blog-content .post-tags a {
  color: hsl(var(--primary));
  font-weight: 500;
  font-size: 16px;
  margin-right: 10px;
}

.blog-details-area .blog-content .post-social-share {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.blog-details-area .blog-content .post-social-share a {
  border: 1px solid hsl(var(--border-color));
  font-style: 14px;
  color: hsl(var(--gary4));
  width: 38px;
  height: 38px;
  border-radius: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.blog-details-area .blog-content .post-social-share a:hover {
  background: hsl(var(--primary));
  color: hsl(var(--white));
}

.blog-details-area .comments__area {
  background: hsl(var(--white));
  border-radius: 10px;
  padding: 30px;
}

.blog-details-area .comments__area .comments-list {
  margin-top: 30px;
  display: grid;
  gap: 20px;
}

.blog-details-area .comments__area .comment {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 20px;
}

.blog-details-area .comments__area .comment:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.blog-details-area .comments__area .comment .comment-img img {
  width: 60px;
  height: 60px;
  border-radius: 100px;
}

.blog-details-area .comments__area .comment .comment-content {
  display: grid;
  gap: 6px;
}

.blog-details-area .comments__area .comment .comment-content h5 {
  color: hsl(var(--secondary));
  margin-bottom: 0;
}

.blog-details-area .comments__area .comment .comment-content span {
  color: hsl(var(--paragraph));
}

.blog-details-area .comments__area .comment .comment-content p {
  color: hsl(var(--paragraph));
}

.blog-details-area .leave__comment {
  background: hsl(var(--white));
  border-radius: 10px;
  padding: 30px;
}

.blog-details-area .leave__comment .commentForm {
  margin-top: 30px;
}

.blog-details-area .leave__comment .commentForm label {
  color: hsl(var(--gray3));
  font-weight: 500;
  margin-bottom: 10px;
}

.blog-details-area .leave__comment .commentForm input,
.blog-details-area .leave__comment .commentForm textarea {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid hsl(var(--border-color));
  margin-bottom: 20px;
}

.blog-details-area .leave__comment .commentForm input:focus-visible,
.blog-details-area .leave__comment .commentForm input:focus,
.blog-details-area .leave__comment .commentForm textarea:focus-visible,
.blog-details-area .leave__comment .commentForm textarea:focus {
  outline: none;
  -webkit-box-shadow: 0px 0px 7px 1px hsl(var(--primary) / 0.3);
  box-shadow: 0px 0px 7px 1px hsl(var(--primary) / 0.3);
}

.blog-details-area .leave__comment .commentForm button {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  text-align: center;
  text-transform: capitalize;
  border-radius: 4px;
  padding: 18px 25px;
  border: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1);
  color: hsl(var(--white));
  width: 100%;
  background: hsl(var(--primary));
  color: hsl(var(--white));
  height: 52px;
}

.blog-details-area .leave__comment .commentForm button:hover {
  background-color: transparent;
  color: hsl(var(--white));
}

.blog-details-area .leave__comment .commentForm button:hover::before {
  width: 100%;
  left: 0;
  right: auto;
}

.blog-details-area .leave__comment .commentForm button::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  background: hsl(var(--secondary));
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

/* ============================
    contact-us css 
=============================== */
.contact-us-area .contact-us__content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(261px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.contact-us-area .contact-us__content .contact-us__item {
  background: hsl(var(--white));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 24px;
  border-radius: 10px;
  gap: 15px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.contact-us-area .contact-us__content .contact-us__item:hover {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  background: #082334;
}

.contact-us-area .contact-us__content .contact-us__item:hover .icon {
  background: #e3edff;
}

.contact-us-area .contact-us__content .contact-us__item:hover .text p,
.contact-us-area .contact-us__content .contact-us__item:hover .text .fs-20 {
  color: hsl(var(--white));
}

.contact-us-area .contact-us__content .contact-us__item .icon {
  min-width: 60px;
  height: 60px;
  border-radius: 100px;
  border: 1px solid #e3edff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.contact-us-area .contact-us__content .contact-us__item .text .fs-20 {
  color: hsl(var(--secondary));
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.contact-us-area .contact-us__content .contact-us__item .text p {
  color: hsl(var(--gray3));
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.contact-us-area .consulting-services-img {
  position: relative;
}

.contact-us-area .consulting-services-img .image {
  position: relative;
  z-index: 1;
  padding-left: 30px;
  padding-right: 30px;
}

.contact-us-area .consulting-services-img .image::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 80%;
  border-radius: 600px 600px 0px 0px;
  background-color: #0c2b47;
  background-image: url("../images/home-two/csbg.png");
}

.contact-us-area .consulting-services-img .image img {
  width: 100%;
  height: auto;
}

#responseMessage {
  margin-top: 15px;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
  display: none;
}

#responseMessage.success {
  color: hsl(var(--white));
  background-color: hsl(var(--success));
}

#responseMessage.error {
  color: hsl(var(--white));
  background-color: hsl(var(--error));
}
/*# sourceMappingURL=main.css.map */

/* Custom css */

.team-two-item .content {
  height: 150px;
  overflow: auto;
  padding-right: 5px;
}

.mxw-150 {
  max-width: 150px !important;
}

#show-dropdown {
  color: hsl(var(--primary));
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.logo-main {
  padding-top: 80px;
  padding-bottom: 20px;
}

.font-italic-bold {
  font-weight: bold;
  /*font-style: italic;*/
}

.copyright-text a {
  color: hsl(var(--white));
}

.copyright-text a:hover {
  color: hsl(var(--primary));
}
h2.fw-bold span {
  display: inline;
  color: #0c2b47;
}
.progress-bar {
  background-color: #0c2b47 !important;
}
.navbar-home-one.sticky img {
  width: 110px;
  position: relative;
  top: -25px;
}
.mb-15 {
  padding-bottom: 15px;
}
.mt-15 {
  padding-top: 15px;
}
.progress-circle-content .fs-18 {
  color: #082334;
  font-weight: 800;
}
i.icon_user_lake {
  width: 76px;
  height: 76px;
  line-height: 76px;
  background-color: #082334;
  color: #fff;
  text-align: center;
  font-size: 25px;
  border-radius: 100%;
}
.team-two-item:hover .text_name {
  color: #ffffff !important;
}
img.logos_reviews_page {
  width: 70px !important;
  height: 70px !important;
  background-color: #fff;
  border-radius: 100%;
  display: inline-block !important;
}
.content_logo_reviews_page {
  text-align: center;
  align-items: center;
  position: relative;
}
.table-wrapper {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  border: 1px solid #082334;
}
table {
  width: 100%;
  border-collapse: collapse;
}
tr:nth-child(odd) {
  background-color: white;
}
th {
  background-color: #082334;
  color: white;
  font-weight: bold;
  padding: 12px 15px;
  text-align: left;
  font-size: 14px;
  border-right: 1px solid #082334;
}
td {
  padding: 12px 15px;
  border-bottom: 1px solid #082334;
  font-size: 13px;
  color: #333;
}
td:nth-child(2) {
  border-right: 1px solid #082334;
  border-left: 1px solid #082334;
}
.content_logo_regates {
  text-align: center;
  margin-top: 15px;
}
img.img_pse_home {
  width: 300px;
}
.content_logo_regates .img_pse_home {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9),
    /* resplandor blanco */ 0 0 15px rgba(0, 0, 0, 0.3); /* leve sombra gris */
  border-radius: 10px; /* opcional */
}
img.img_pse_home_footer {
  width: 200px;
}
/* Estilos para los botones de navegación */
.owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* Para que el contenedor no bloquee clics */
}

.owl-nav button {
  background: #29e6aa; /* color de fondo */
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all; /* Reactivar clics en los botones */
  transition: background 0.3s ease;
}

.owl-nav button:hover {
  background: #1abf88; /* un poco más oscuro al pasar el mouse */
}

/* Íconos dentro de los botones */
.owl-nav button span {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}
.owl-nav button.owl-prev span::before {
  content: "<";
  font-size: 20px;
  color: #fff;
}
.owl-nav button.owl-next span::before {
  content: ">";
  font-size: 20px;
  color: #fff;
}
.owl-nav button span {
  font-size: 0;
}
button.owl-next span {
  background-color: #fec40e;
  width: 45px;
  height: 45px;
  line-height: 45px;
}

button.owl-prev span {
  background-color: #fec40e;
  width: 45px;
  height: 45px;
  line-height: 45px;
}
.services-details {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
}

.why-choose-img span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}

.bg-pse{
  background-color: #216b79 !important;
}

.border-color-blue{
  border-color: #082334 !important;
}

@media (max-width: 992px) {
  .navbar-home-one .navbar .btn-close {
    color: #000 !important;
    z-index: 99;
    position: relative;
    filter: none !important;
    opacity: 1;
  }
  .scroll-top {
    bottom: 100px;
  }
  .navbar-home-one .navbar {
    background: #0c2b47;
  }
  .blog-content p.business-btn {
    margin-top: 10px !important;
  }
  .img-reviews {
    margin-bottom: 20px;
  }
  .contact-us-area .contact-us__content .contact-us__item .text p {
    font-size: 15px;
  }
  .footer-area .footer-content .footer-wedget-area .wedget-content {
    padding: 30px 40px;
  }
  .navbar-home-one.sticky img {
    width: 110px;
    position: relative;
    top: 0px;
  }
}