/*-----------------------------------*\
  #style.css
\*-----------------------------------*/

/**
 * copyright 2022 codewithsadee
 */





/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

    /**
     * colors
     */
  
     --dark-jungle-green: hsl(188, 63%, 7%);
    --prussian-blue: hsl(200, 69%, 14%);
     --prussian-blue-1: #009dad;
     --raisin-black-1: hsl(227, 29%, 13%);
     --raisin-black-2: hsl(229, 17%, 19%);
     --yellow-green: hsl(89, 72%, 45%);
     --orange-soda: hsl(9, 100%, 62%);
     --orange-soda-1: #f08a1d;
     --cultured-1: hsl(0, 0%, 93%);
     --cultured-2: hsl(192, 24%, 96%);
     --misty-rose: hsl(7, 56%, 91%);
     --alice-blue: hsl(210, 100%, 97%);
     --oxblood: hsl(0, 88%, 13%);
     --cadet: hsl(200, 15%, 43%);
     --white: hsl(0, 0%, 100%);
     --white-1: #f9f9f9;
     --black: hsl(0, 0%, 0%);
     --blue: #007BFF;
     --opal: hsl(180, 20%, 62%);
     --brown: rgba(100, 85, 79, 1);




      --c0: #3d5b5e;
      --c1: #1e6067;
      --c2: #175e5e;
      --c3: #0d3e3f;
      --c4: #083838;
      --c5: #032629;
      --c6: #010a0d;
      --clr: 1; /* change color from 1 to 12 */
       --hue: calc(30deg - (30deg * var(--clr))); 
    /**
     * typography
     */
  
    --ff-nunito-sans: "Nunito Sans", sans-serif;
    --ff-poppins: "Poppins", sans-serif;
  
    --fs-1: 1.875rem;
    --fs-2: 1.5rem;
    --fs-3: 1.375rem;
    --fs-4: 1.125rem;
    --fs-5: 0.875rem;
    --fs-6: 0.813rem;
    --fs-7: 0.75rem;
  
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
  
    /**
     * transition
     */
  
    --transition: 0.25s ease;
  
    /**
     * spacing
     */
  
    --section-padding: 100px;
  
    /**
     * shadow
     */
  
    --shadow-1: 0 5px 20px 0 hsla(219, 56%, 21%, 0.1);
    --shadow-2: -3px -3px 7px #ffffff73, 2px 2px 5px rgba(94,104,121,0.288);
    --shadow-3: inset 2px 2px 5px #babecc, inset -5px -5px 10px #ffffff73;
    --shadow-4: inset 1px 1px 2px #babecc, inset -1px -1px 2px #ffffff73;

  }
  
  
  
  
  /*-----------------------------------*\
    #RESET
  \*-----------------------------------*/
  
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;    
  }
  
  li { list-style: none; }
  
  a { 
    text-decoration: none;
    color: var(--orange-soda);
   }
  
  a,
  img,
  span,
  button,
  ion-icon { display: block; }
  button {
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }
  
  address { font-style: normal; }
  
  ion-icon { pointer-events: none; }
  
  html {
    font-family: var(--ff-nunito-sans);
    scroll-behavior: smooth;
  }

  
  body {
    background: var(--white-1);
    overflow-x: hidden;
  }
  
  ::-webkit-scrollbar {
    width: 10px;
    height: 8px;
  }
  
  ::-webkit-scrollbar-track { background: var(--white); }
  
  ::-webkit-scrollbar-thumb {
    background: var(--cadet);
    border-left: 2px solid var(--white);
  }
  form{
    padding: var(--section-padding);
  }
  fieldset {
    border: 2px solid var(--orange-soda);
    border-radius: 5px;
    padding: var(--section-padding);
    margin-bottom: 20px;
    background-color: var(--white-1);
}

legend {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--black);
}

label {
    display: block;
    margin-top: 10px;
}

input, select, textarea {
    margin-bottom: 10px;
    padding: 8px;
    width: 100%;
    font-size: 1em;
    box-sizing: border-box;
    border: none;
    border-radius: 5px;
    outline: none;
    box-shadow: var(--shadow-3);
}
input, select:focus {
    box-shadow: var(--shadow-4);
}

  

  /*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.container { padding-inline: 15px; }

 button, a { transition: var(--transition); }

 .h1,
 .h2,
 .h3 {
   color: var(--dark-jungle-green);
   font-family: var(--ff-poppins);
   line-height: 1.3;
 }
 
 .h1 {
   font-size: var(--fs-1);
   line-height: 1;
 }
 
 .h2 { font-size: var(--fs-2); }
 
 .h3 {
   font-size: var(--fs-4);
   font-weight: var(--font-weight, 700);
 }
 
 .h3 > a { color: inherit; }
 
 .btn {
   position: relative;
   background: var(--orange-soda);
   color: var(--white);
   font-family: var(--ff-poppins);
   font-size: var(--fs-5);
   text-transform: var(--text-transform, capitalize);
   border: 1px solid var(--orange-soda);
   padding: 10px 20px;
   z-index: 1;
 }
 
 .btn:is(:hover, :focus) {
   background: var(--black);
   color: var(--dark-jungle-green);
   border-color: var(--black);
 }
 
 .btn::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   background: var(--white);
   transition: var(--transition);
   z-index: -1;
 }
 
 .btn:is(:hover, :focus)::before { width: 100%; }
 
 .w-100 { width: 100%; }
 .section-subtitle {
    color: var(--orange-soda);
    font-size: var(--fs-5);
    font-weight: var(--fw-600);
    padding: 5px 20px;
    background: hsla(9, 100%, 62%, 0.1);
    width: max-content;
    border-radius: 50px;
    margin-inline: auto;
    margin-bottom: 15px;
    margin-top: 15px;
    
  }
  .section-subtitle-dark {
    color: var(--white);
    font-size: var(--fs-5);
    font-weight: var(--fw-600);
    padding: 5px 20px;
    background: var(--orange-soda);
    width: max-content;
    border-radius: 50px;
    margin-inline: auto;
    margin-bottom: 15px;
    margin-top: 15px;    
  }
  .section-subtitle-dark-1 {
    color: var(--white);
    font-size: var(--fs-5);
    font-weight: var(--fw-600);
    padding: 5px 20px;
    background: var(--orange-soda);
    width: max-content;
    border-radius: 8px;
    margin-inline: 0;
    margin-bottom: 15px;
    margin-top: 15px;
    text-transform: uppercase;    
  }
  .section-title {
    text-align: var(--text-align, center);
    margin-bottom: var(--margin-bottom, 50px);
  }
  .heading {
    text-align: var(--text-align, center);
    margin-bottom: var(--margin-bottom, 20px);
  }
.card-badge {
    background: var(--black);
    color: var(--white);
    font-size: var(--fs-7);
    text-transform: uppercase;
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 4px 10px;
  }
  
  .card-badge.green { background: var(--yellow-green); }
  
  .card-badge.orange { background: var(--orange-soda); }
  
  .has-scrollbar {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    overflow-x: auto;
    margin-inline: -15px;
    padding-inline: 15px;
    scroll-padding-left: 15px;
    padding-bottom: 60px;
    scroll-snap-type: inline mandatory;
  }
  
  .has-scrollbar > li {
    min-width: 100%;
    scroll-snap-align: start;
  }
  
  .has-scrollbar::-webkit-scrollbar-track {
    background: var(--cultured-2);
    outline: 2px solid var(--cadet);
    border-radius: 10px;
  }
  
  .has-scrollbar::-webkit-scrollbar-thumb {
    background: var(--cadet);
    border: 1px solid var(--cultured-2);
    border-radius: 10px;
  }
  
  .has-scrollbar::-webkit-scrollbar-button { width: 15%; }

  .partial-border {
    display: inline-block;
    border-bottom: 2px solid #000; /* Set the border color and thickness */
    width: 50%; /* Set the width of the border */
    margin-bottom: -2px; /* Optional: Adjust to align the text better */
}

  
 
/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header {
    position: relative;
    z-index: 10;
  }
  
  .header-top {
    background: var(--prussian-blue);
    padding-block: 15px;
  }
  
  .header-top .container,
  .header-top-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  
  .header-top .container { gap: 8px 20px; }
  
  .header-top-list { gap: 15px; }
  
  .header-top-link {
    color: var(--white);
    font-size: var(--fs-6);
    font-weight: var(--fw-700);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }
  
  .header-top-link:is(:hover, :focus) { color: var(--orange-soda); }
  
  .header-top-link ion-icon {
    color: var(--orange-soda);
    font-size: 15px;
    --ionicon-stroke-width: 60px;
  }
  
  .header-top .wrapper,
  .header-top-social-list {
    display: flex;
    align-items: center;
  }
  
  .header-top .wrapper { gap: 20px; }
  
  .header-top-social-list { gap: 8px; }
  
  .header-top-social-link {
    color: var(--white);
    font-size: 15px;
  }
  
  .header-top-btn {
    background: var(--orange-soda);
    color: var(--white);
    font-size: var(--fs-6);
    font-weight: var(--fw-700);
    padding: 4px 15px;
  }
  
  .header-top-btn:is(:hover, :focus) { --orange-soda: hsl(7, 72%, 46%); }
  
  .header-bottom {
    background: var(--white);
    padding-block: 25px;
  }
  
  .header-bottom .logo img { margin-inline: auto; }
  
  .navbar {
    background: var(--white);
    position: fixed;
    top: 0;
    left: -310px;
    max-width: 300px;
    width: 100%;
    height: 100%;
    box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.3);
    z-index: 5;
    padding: 60px 20px;
    visibility: hidden;
    transition: 0.15s ease-in;
  }
  
  .navbar.active {
    visibility: visible;
    transform: translateX(310px);
    transition: 0.25s ease-out;
  }
  
  .navbar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--cultured-1);
    margin-bottom: 25px;
  }
  
  .navbar-top .logo img { width: 200px; }
  
  .nav-close-btn ion-icon {
    font-size: 20px;
    --ionicon-stroke-width: 45px;
    padding: 5px;
  }
  
  .navbar-link {
    color: var(--cadet);
    font-size: var(--fs-5);
    font-weight: var(--fw-600);
    text-transform: uppercase;
    padding-block: 15px;
  }
  
  .navbar-link:is(:hover, :focus) { color: var(--orange-soda); }
  
  .overlay {
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 0%, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
    z-index: 4;
  }
  
  .overlay.active {
    opacity: 1;
    pointer-events: all;
  }
  
  .header-bottom-actions {
    background: var(--white);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    padding-block: 15px 10px;
    box-shadow: -2px 0 30px hsla(237, 71%, 52%, 0.2);
    z-index: 3;
  }
  
  .header-bottom-actions-btn ion-icon {
    color: hsl(0, 0%, 10%);
    font-size: 20px;
    margin-inline: auto;
    margin-bottom: 5px;
    --ionicon-stroke-width: 40px;
    transition: var(--transition);
  }

  .header .search-field{ 
    display: none;
    position: absolute;
    transition: var(--transition);
    right: 6%;
    bottom: -1rem;
    z-index: 10;
    
  }
  .search-field form { 
    display: flex;
    gap: .5rem;
    padding: 5px;
  }
  .search-field form input { 
    margin: 0;
    background-color: transparent;
    backdrop-filter: blur(10px);
    border: 1px solid var(--white);
  }
  .search-field form button ion-icon{ 
    background-color: transparent;
    backdrop-filter: blur(10px);
    color: hsl(0, 0%, 10%);
    font-size: 20px;
    border: 1px solid var(--white);
    border-radius: 50%;
    --ionicon-stroke-width: 40px;
    transition: var(--transition);
    padding: 10px;
    box-shadow: var(--shadow-2);

  }
  
  .search-field form button:is(:hover, :focus) ion-icon { color: var(--orange-soda);}
  
  .header-bottom-actions-btn:is(:hover, :focus) ion-icon { color: var(--orange-soda); }
  
  .header-bottom-actions-btn span {
    color: var(--cadet);
    font-family: var(--ff-poppins);
    font-size: var(--fs-7);
    font-weight: var(--fw-500);
  }
  
  /*-----------------------------------*\
  #BANNER
\*-----------------------------------*/
.banner{
    min-height: 70vh;
    padding-block: var(--section-padding);
}
.banner-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    min-height: 93vh;
    background-color: var(--cultured-2);
    background-size: cover; 
    background-position: center;
    border-image: fill 0 linear-gradient(rgba(64, 63, 63, 0.067), #00000073);
    z-index: -1;
}
.banner-wrapper{
    /* background-color: #babecc; */
    max-width: 70%;
    margin-inline: auto;

}
.banner-wrapper ion-icon {
    color: var(--cultured-2);
    font-size: 2.5rem;
    margin-inline: auto;
    padding: 1rem 0;
}
.banner-wrapper h2 {
    color: var(--white);
    font-size: 3.2rem;
    margin-inline: auto;
    margin-bottom: 0;
}
.banner-wrapper a {
    font-size: 1.2rem;
    margin-inline: auto;
    line-height: 1.5rem;
}
  /*-----------------------------------*\
  #BANNER2
\*-----------------------------------*/
.banner2{
    padding-block: var(--section-padding);
    background-color: var(--oxblood);
    min-height: 50vh;
    background-image: url('/images/others/pages-banner.png');
    background-size: cover; 
    background-position: center;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.banner22::before, .banner22::after {
    content: '';
    position: absolute;
    /* background-image: url('/images/background shapes/concrete-background.jpg'); */
    background-size: cover; 
    background-position: center;
    background-color: var(--cultured-2);
    z-index: -1; 
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    opacity: .2;
    border: 8px solid #fff;
    box-shadow: var(--shadow-3);
}

.banner22::before {
    top: 0;
    left: 0;
}

.banner22::after {
    bottom: 0;
    right: 0;
}
.banner2-wrapper{
    max-width: 100%;
    margin-inline: auto;
    position: relative;
    padding-top: 2.5rem;
    z-index: 10;

}
.banner2-wrapper ion-icon {
    background-color: var(--white);
    border-radius: 50%;
    font-size: 2.5rem;
    box-shadow: var(--shadow-2);
    margin-inline: auto;
    padding: 6px;
    position: relative;
    z-index: 11;
    
}
.banner2-wrapper h2 {
    color: var(--white);
    font-size: 3.2rem;
    margin-inline: auto;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 11;

}
.banner2-wrapper a {
    color: var(--orange-soda-1);
    font-size: 1.2rem;
    line-height: 1.5rem;
    position: relative;
    z-index: 11;
    margin: 0;

}
/*-----------------------------------*\
  #TAG
\*-----------------------------------*/
.tag {
    padding: 1.5rem 0;
    font-size: 1.3rem;
    text-align: center;
}
/*-----------------------------------*\
  #TAG-1
\*-----------------------------------*/
.tag-1 {
    padding: 3rem 0;
    text-align: center;
}
.tag-1 h3{
    font-size: 2rem;
}
.tag-1-text{
    font-size: 1.05rem;
    line-height: 1.7;
}
/*-----------------------------------*\
  #ERRROR 404
\*-----------------------------------*/
.error {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
    perspective: 1000vmin;
    font-family: 'Varela Round', Arial, Helvetica, serif;
	background: var(--c0);
}

.error * {
    transform-style: preserve-3d;
}
  .cuboid {
    --size: 250;
    --height: var(--size);
    --width: var(--size);
    --depth: var(--size);
    height: calc(var(--size) * 1vmin);
    width: calc(var(--size) * 1vmin);
    position: absolute;
    transform: rotateX(50deg) rotate(45deg);
    pointer-events: none;
}

.cuboid .side {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	border-radius: 2px;
    box-shadow: 0vmin 0vmin 0.5vmin 0 var(--c0) inset, 0 0 5vmin 0 var(--c0);
}

.cuboid .side:nth-of-type(1) {
	transform: translate3d(-50%, -50%, calc(var(--size) * -0.5vmin)) rotateY(180deg);
	background: radial-gradient(circle at 100% 0%, var(--c4), #fff0 45vmin),radial-gradient(circle at 100% 0%, var(--c1), var(--c4));
}
 
.cuboid .side:nth-of-type(2) {
	width: calc(var(--size) * 1vmin);
	transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--size) * 0.5vmin));
	background: radial-gradient(circle at 0% 0%, var(--c4), #fff0 45vmin),radial-gradient(circle at 0% 0%, var(--c2), var(--c5));
}

.cuboid .side:nth-of-type(3) {
	height: calc(var(--size) * 1vmin);
	transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, calc(var(--size) * 0.5vmin));
	background: radial-gradient(circle at 0% 0%, var(--c4), #fff0 45vmin), radial-gradient(circle at 0% 0%, var(--c1), var(--c6));
}


.room {
	width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    filter: hue-rotate(var(--hue));
}


.oops {
    width: 100%;
    text-align: center;
    font-size: 2.25vmin;
    transform: rotateX(21deg);
    transform-origin: 100% 50%;
    top: 10%;
    position: absolute;
    left: 0;
}

.oops h2 {
    color: #fff2;
    float: left;
    transform-origin: 100% 50%;
    transform: rotateY(-60deg) scaleX(1.5);
    margin: -5vmin 0 0 -5vmin;
    font-size: 14vmin;
    width: 50%;
    text-shadow: 0px 2px 1px #94B5FF, -1px 1px 2px #94b5ff80, -1px -1px 2px var(--c4), -2px -2px 2px var(--c4), -3px -3px 2px var(--c4), -4px -4px 2px var(--c4), -5px -5px 2px var(--c4), -6px -6px 2px var(--c4), -7px -7px 2px var(--c4), -8px -8px 2px var(--c4), -9px -9px 2px var(--c4), -10px -10px 2px var(--c4), -11px -11px 2px var(--c4), -12px -12px 2px var(--c4), -13px -13px 2px var(--c4), -14px -14px 2px var(--c4), -15px -15px 2px var(--c4), -16px -16px 2px var(--c4), -16px -16px 2px var(--c6), -10px -10px 8px var(--c6), -6px -15px 13px var(--c6);
}

.oops p {
    float: right;
    color: #fff4;
    transform-origin: 0% 50%;
    transform: rotateY(60deg) scaleX(1.5);
    margin-top: -4vmin;
    margin-right: -2vmin;
    font-size: 5vmin;
    max-width: 50vmin;
    width: 50%;
    text-shadow: 0px 2px 1px #94B5FF, -1px 1px 2px #94b5ff80, 1px -1px 2px var(--c4), 2px -2px 2px var(--c4), 3px -3px 2px var(--c4), 4px -4px 2px var(--c4), 5px -5px 2px var(--c4), 6px -6px 2px var(--c4), 7px -7px 2px var(--c4), 8px -8px 2px var(--c4), 6px -6px 7px var(--c6), 6px -6px 7px var(--c6);
}


.center-line {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.hole {
    width: 28vmin;
    height: 20vmin;
    background: 
        radial-gradient(circle at 50% 0%, var(--c2), #fff0 45%), 
        radial-gradient(circle at 30% 100%, #061b43, #fff0 77%), 
        radial-gradient(circle at 20% 100%, var(--c3), var(--c2), var(--c2));
    border-radius: 100%;
    box-shadow: 0 -2px 4px -2px #fffc, 0 2px 3px -3px #fffc inset, 0 2px 6px -4px #000;
    overflow: hidden;
    position: relative;
    margin-top: 30vmin;
}


.ladder,
.ladder-shadow {
    --shadow: #0008;
    background: 
        linear-gradient(180deg, #fff0 33%, var(--shadow), #000), 
        linear-gradient(90deg, #cec3b9 0 1.2vmin, #b3aba2 0 1.5vmin, #fff0 0 100%), 
        linear-gradient(90deg, #cec3b9 0 1.2vmin, #b3aba2 0 1.75vmin, #fff0 0 calc(100% - 1.75vmin)), 
        repeating-linear-gradient(0deg, #cec3b9 0 1.2vmin, #e7dbcf 0 1.75vmin, #fff0 0 6.75vmin), 
        linear-gradient(90deg, #cec3b9 0 1.2vmin, #b3aba2 0 1.75vmin, #fff0 0 calc(100% - 1.75vmin));
    width: 10vmin;
    height: 30vmin;
    margin-left: 14vmin;
    position: absolute;
    top: 0vmin;
    transform: rotate3d(4, 1, 1, 45deg) skew(0deg, 20deg);
    background-position: 0 0, 0 0, 8.25vmin 0, 0 -3.25vmin, 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.ladder-shadow {
    filter: invert(1) blur(1px) opacity(0.4) contrast(5);
    transform: rotate3d(2, 1, 1, 45deg) rotate(-10deg) translate(1.15vmin, 1.9vmin) skew(0deg, 20deg);
    --shadow: #0000;
}

.ladder:before, 
.ladder:after {
    content: "";
    position: absolute;
    background: linear-gradient(210deg, #fff0 0.4vmin, #e7dbcf calc(0.35vmin + 1px) 1.45vmin, #b3aba2 calc(1.4vmin + 1px) 100%);
    width: 0.85vmin;
    height: 1.75vmin;
    transform-origin: 0 1%;
    transform: rotate(-90deg);
    top: 1px;
}

.ladder:after {
    left: 8.25vmin;
}


.four {
    font-size: 45vmin;
    font-weight: bold;
    font-family: Arial, Helvetica, serif;
    position: absolute;
    margin-left: -58vmin;
    margin-top: 27vmin;
    transform: rotate(22deg) scale(0.8, 0.85) rotateX(40deg) rotateY(-10deg) rotateZ(-5deg);
    text-shadow: 0px 2px 1px #94b5ff, -1px 1px 2px #94b5ff80, 1px 2px 2px var(--c3), 2px 4px 2px var(--c3), 4px 6px 2px var(--c3), 5px 8px 2px var(--c3), 6px 10px 2px var(--c3), 7px 12px 2px var(--c3), 8px 14px 2px var(--c3), 9px 16px 2px var(--c3), 10px 18px 2px var(--c3), 11px 20px 3px var(--c3), 12px 22px 3px var(--c3), 13px 22px 10px var(--c6), 18px 14px 15px var(--c6);
    color: var(--c1);
    filter: drop-shadow(10px -4px 10px var(--c4));
}

.four + .four {
    margin-left: 43vmin;
    margin-top: 15vmin;
    transform: scale(0.95, 0.75) rotateX(5deg) rotateY(35deg) rotateZ(30deg) translateZ(18vmin);
    text-shadow: 1px 0px 2px #94b5ff, 3px 0px 2px #94b5ff80, 1px 0px 0px var(--c3), 2px 0px 2px var(--c3), 4px 0px 2px var(--c3), 5px 0px 2px var(--c3), 6px 0px 2px var(--c3), 7px 0px 2px var(--c3), 8px 0px 2px var(--c3), 9px 0px 2px var(--c3), 10px 0px 2px var(--c3), 11px 0px 3px var(--c3), 12px 0px 3px var(--c3), 20px 0px 3px var(--c3), 13px 0px 5px var(--c6), 18px -6px 15px var(--c6);
}

.four + .four:before,
.four + .four:after {
    content: "4";
    color: var(--c6);
    position: absolute;
    transform-origin: 60% 0%;
    transform: rotateX(27deg) rotate(-20deg) translate(-0.5vmin, 0.5vmin) skew(0deg, 20deg);
    transform-style: preserve-3d;
    text-shadow: none;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 0 46%, 0 0);
    filter: blur(5px);
    opacity: 0.4;
}

.four + .four:after {
    transform-origin: 50% 100%;
    transform: rotatex(12deg) rotate(-13deg) translate(-27.5vmin, -5.5vmin) skew(-32deg, 6deg) scaleX(1.1);
    clip-path: polygon(0 39.75%, 100% 49.25%, 100% 100%, 0 100%, 0 50%);
}


.error-btn {
    position: absolute;
    bottom: -15vmin;
    transform-origin: 50% 0%;
    transform: rotateX(15deg);
}

.error-btn a {
    border-radius: 0.2vmin;
    padding: 1.5vmin 2.5vmin;
    background: var(--c1);
    text-decoration: none;
    color: var(--white);
    top: 0;
    font-size: 3vmin;
    text-shadow: 0px -2px 2px var(--c0), 0px 1px 3px var(--c6);
    position: relative;
    transition: all 0.25s linear 0s;
    box-shadow: 1px 0px 1px #94b5ff, 0px 2px 2px #94b5ff80, 0px 1px 2px var(--c3), 0px 4px 2px var(--c3), 0px 6px 2px var(--c3), 0px 8px 2px var(--c3), 0px 10px 2px var(--c3), 0px 12px 2px var(--c3), 0px 14px 2px var(--c3), 0px 16px 2px var(--c3), 0px 18px 2px var(--c3), 0px 20px 3px var(--c3), 2px 22px 3px var(--c3), 0px 23px 3px var(--c6), 0px 3px 15px var(--c6);
}

.error-btn a:hover {
    top: 16px;
    color: var(--c6);
    box-shadow: 1px 0px 1px #94b5ff, 0px 2px 2px #94b5ff80, 0px 1px 2px var(--c3), 0px 1px 2px var(--c3), 0px 2px 2px var(--c3), 0px 2px 2px var(--c3), 0px 2px 2px var(--c3), 0px 2px 2px var(--c3), 0px 2px 3px var(--c3), 0px 2px 3px var(--c3), 0px 2px 2px var(--c3), 0px 2px 3px var(--c3), 2px 2px 3px var(--c3), 0px 4px 3px var(--c6), 2px 5px 6px var(--c6);
}

.error-btn::after {
    content: "";
    position: absolute;
    background: var(--c4);
    width: 100%;
    height: 300%;
    left: 0;
    top: 0;
    transform: translateZ(-2vmin) skew(-10deg, 0deg) translateY(-4.5vmin) translateX(1vmin);
    filter: blur(5px);
    transition: all 0.5s ease 0s;
    opacity: 0.35;
}

.error-btn:hover::after {
    background: #0000;
    width: 100%;
    height: 20%;
    left: 0;
    top: 0;
    transform: translateZ(-2vmin) skew(-0deg, 0deg) translateY(0vmin) translateX(0vmin);
}


@media screen and (orientation: portrait) {
    .oops p { line-height: 10vmin; font-size: 6.5vmin; }
}
/*-----------------------------------*\
  #MESSAGES
\*-----------------------------------*/
.error-text{
  color: red;
  font-size: 14px;
  font-weight: 100;
  margin-top: -8px;
  margin-bottom: .5rem;
}
.custom-error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.custom-success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.alert {
  position: relative;
  padding-right: 35px; /* Make space for the close button */
}

.alert .close {
  position: absolute;
  top: .35rem;
  right: 10px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
}

.alert .close:hover {
  opacity: 1;
  cursor: pointer;
}
.close {
  position: absolute;
  top: 0;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
}

.close:hover {
  opacity: 1;
  cursor: pointer;
}

/*-----------------------------------*\
  #NOTICE
\*-----------------------------------*/
.notice{
    background-color: var(--white);
    padding-bottom: 2rem;
  }
  .notice-flex{
    padding-top: 4rem;
  }
  .notice-flex{
    padding-inline: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
  }
  .notice-content{
    flex-grow: 1;
    flex-basis: 200;
    /* max-width: 40%; */
  }
  #notice-content-left{
    max-width: 25%;
    overflow: hidden;
  }
  #notice-content-right{
    max-width: 50%;
  }
  #notice-content-right .section-subtitle-dark {
    margin-inline: 0;
    margin-top: 0;
  }
  .notice-icon img {
    max-width: 100%;
  }

  .notice-content h2{
    text-align: left;
    font-size: 2.2rem;
    font-weight: var(--fw-700);
    line-height: 2.6rem;
    margin-bottom: 1.4rem;
  }
  .notice-text{
    color: var(--cadet);
    font-size: 1.2rem;
    font-weight: var(--fw-500);
    line-height: 1.7rem;
    margin-bottom: 0;
  }
  
  

  

/*-----------------------------------*\
  #ABOUT COUNT
\*-----------------------------------*/
.about-count{
    background-image: url('/images/background shapes/gray-shape-thick2.svg');
    background-color: var(--cultured-2);
    background-size: cover; 
    background-position: center;
    padding-block: var(--section-padding);
    position: relative;
    min-height: 70vh;

}
.about-count .h3{
    color: var(--black);
    text-transform: uppercase;
    font-size: 1.6rem;
}
.count-flex{
    display: flex;
    flex-wrap: nowrap;
    gap: 4rem;
    width: 100%;
    padding-top: 1rem;
}
.count-card{
    flex-basis: 200;
    flex-grow: 1;
    max-width: 100%;
    text-align: center;
}
.count-text{
    color: var(--cadet);
    font-size: 1rem;
    line-height: 1.7;
}
.count-icon ion-icon {
    font-size: 2.3rem;
    padding: 1rem 0;
    margin-inline: auto;
    color: var(--orange-soda-1);
}
.count-number{
    font-size: 2rem;
    color: var(--oxblood);
    font-family: var(--ff-poppins);
    font-weight: var(--fw-700);
}
.count-card h3{
    font-size: 1.5rem;
}

/*-----------------------------------*\
  #ABOUT CTA
\*-----------------------------------*/
.about-cta{
    max-height: fit-content;
    background-image: url('/images/background shapes/counter-bg_1.png');
    background-size: cover; 
    background-position: center;
    /* background-color: var(--prussian-blue-1); */
    padding: 3rem 0;
    position: relative;
}
.cta-flex{
    display: flex;
    gap: 2.4rem;
    justify-content: center;
    width: 100%;

}
.cta-items{
    flex-basis: 200;
    flex-grow: 1;
    color: var(--white);
}
.left-text{
    max-width: 90%;
    font-size: 1.4rem;
    font-weight: var(--fw-700);
    border-left: solid 8px var(--orange-soda-1);
    padding-left: 10px;
    line-height: 1.1;
}
.right-text{
    max-width: 100%;
    line-height: 1.7;
}

/*-----------------------------------*\
  #ABOUT TEAM   
\*-----------------------------------*/

.about-team { 
    padding-block: var(--section-padding); 
    background-color: var(--cultured-2);
    background-image: url('/images/background shapes/gray-shape-medium-light.svg');
    background-size: cover; 
    background-position: center;
  }
  .about-team .h3{
    color: var(--black);
    text-transform: uppercase;
    font-size: 1.6rem;
    margin-bottom: 4rem;
}
  .team-flex{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
  }
  .team-card{
    text-align: center;
  }
  .team-card:nth-child(4){
    grid-column: span 3; /* Makes the 4th card start a new row */
    text-align: center;
    max-width: 40%;
    margin-inline: auto;

  }
  .team-avatar img{
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    margin-inline: auto;
    margin-bottom: 15px;
  }
  .team-name{
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--black);
  }
  .team-title{
    text-transform: uppercase;
    color: var(--cadet);
    line-height: 1.7;
    font-size: .8rem;
  }
  .team-text {
    max-width: 100%;
  }

/*-----------------------------------*\
  #CONTACT OFFICE
\*-----------------------------------*/
.office{
    padding-block: var(--section-padding);
    background-image: url('/images/background shapes/world-map-fade.svg');
    background-color: var(--cultured-2);
    background-size: cover; 
    background-position: center;
}
.office-flex {
    display: flex;
    justify-content: center;
    gap: 3rem;
}
.office-card {
    flex: 0 0 22%;
}
.office-title {
    color: var(--prussian-blue-1);
    font-size: 1.7rem;
    margin-bottom: 1rem;
}
.office-text {
    color: var(--cadet);
    line-height: 1.7;
    font-size: 1rem;
}
.office-text span {
    font-size: .9rem;
}
/*-----------------------------------*\
  #CONTACT-FORM
\*-----------------------------------*/
.contact-form{
    background-image: url('/images/background shapes/gray-shape-medium-light.svg');
    background-color: var(--cultured-2);
    background-size: cover; 
    background-position: center;
}
.contact-form form {
    max-width: 90%;
    margin-inline: auto;
}
.contact-form fieldset {
    padding: 2rem;
}
.contact-form fieldset span {
    display: inline;
    color: var(--orange-soda);
}
.data-flex {
    display: flex;
    gap: 3rem;
    max-width: 100%;
    overflow: hidden;
}
.data-group{
    flex: 0 0 30%;
}
.contact-form textarea {
    min-height: 10rem;
    max-height: 10rem;
    resize: none;
    margin-bottom: 1rem;
}
.contact-form-text{
    margin-bottom: 1rem;
    color: var(--cadet);

}
.contact-form-text a{
    display: inline;
}
.contact-form button {
    margin-inline: auto;
}
/*-----------------------------------*\
  #SERVICE QUOTE
\*-----------------------------------*/
.service-quote {
    background-color: var(--white);
    padding-block: var(--section-padding);    
}
.quote-flex{
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding-inline: 1rem;
}
.quote-icon  {
    flex: 0 0 33%;
}
.quote-icon img {
    max-width: 100%;
}

/*-----------------------------------*\
  #SERVICE ROW
\*-----------------------------------*/
.service-row {
    background-color: var(--white);
    padding-block: var(--section-padding);
}
.row-list {
   display: grid;
   gap: 3rem;
   grid-template-columns: repeat(3, 1fr);
   padding-top: 3rem;
   /* grid-template-rows: repeat(3, 1fr);     */
    
}
.row-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;    
    background-color: var(--white);
    padding: 2rem;
    text-align: center;
    align-items: center;
    box-shadow: var(--shadow-1);
    min-height: 50vh;
    z-index: 0;
    transition: transform 0.3s ease-in-out;

}
.row-card a{
    margin-inline: auto;
}
.row-card-title{
    font-size: 1.5rem;
    padding: 1rem 1rem;
    width: 70%;
    margin-inline: auto;
}
.row-card-text {
    line-height: 1.7;
    color: var(--cadet);
    margin-bottom: 2rem;
}
.row-card-icon {
    position: absolute;
    display: flex;
    align-items: center;
    top: -5%;
    left: -5%;
    min-width: 6rem;
    min-height: 6rem;
    background-color: var(--white);
    box-shadow: var(--shadow-1);
    z-index: 0;
}
.row-card-icon img{
    width: 60%;
    margin-inline: auto;
    transition: transform 0.3s ease;
}
.row-card-digit {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--cadet);
    font-size: 1.3rem;
    z-index: 0;
}
.row-card:hover .row-card-icon img{
  transform: scaleX(-1);
  filter: brightness(0) invert(1);
}
.row-card:hover .row-card-icon {
  background-color: var(--orange-soda);
  border: solid 8px var(--white-1);
  box-shadow: none;
}
.row-card:hover .row-card a {
  background-color: var(--white);
  color: var(--black);
}
.row-card:hover .row-card-title, 
.row-card:hover .row-card-text, 
.row-card:hover .row-card-digit {
  color: var(--white);
}
.row-card > *{
  z-index: 1;
}
.row-card:hover{
  background: url('/images/hero images/hero_overlay_1_1.png') center/cover no-repeat; 
}


/*-----------------------------------*\
  #SERVICE INVEST
\*-----------------------------------*/
.service-invest {
    padding-block: var(--section-padding);
    background-color: var(--cultured-2);
    position: relative;
}
.invest-image {
    position: relative;
}
.invest-logo {
    position: absolute;
    top: 70%;
    left: 30%;
}
.invest-title {
    font-size: 1.3rem;
    text-align: center;
    padding-top: 3rem;
    margin-bottom: 2.5rem;
}
.invest-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}
.invest-item {
    flex: 0 0 50%;
}
.invest-item-heading {
    font-size: 1.5rem;
    color: var(--prussian-blue-1);
    margin-bottom: 1rem;
}
.invest-item-text {
    line-height: 1.7;
    color: var(--cadet);
}
.invest-item-text span {
    margin-top: 1rem;
    font-weight: var(--fw-700);
}

/*-----------------------------------*\
  #BLOG
\*-----------------------------------*/

.blog { padding-block: var(--section-padding); background-color: var(--cultured-2);}

/* .blog-card { box-shadow: var(--shadow-2); } */

.blog-card .card-banner {
  overflow: hidden;
  aspect-ratio: 2 / 1.5;
}

.blog-card .card-banner img {
  height: 100%;
  object-fit: cover;
  transition: 0.5s ease;
}

.blog-card:is(:hover, :focus) .card-banner img { transform: scale(1.1); }

.blog-content { padding: 0;}

.blog-content-top, .blog-content-bottom {padding: 7px 12px;}


.blog-card .card-meta-list {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.blog-card :is(.card-meta-link, .publish-date) {
  color: var(--cadet);
  font-size: var(--fs-7);
  font-weight: var(--fw-600);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: var(--transition);
}

.blog-card :is(.card-meta-link, .publish-date) ion-icon { color: var(--orange-soda); }

.blog-card .card-meta-link:is(:hover, :focus) { color: var(--orange-soda); }

.blog-title {
  font-size: 1rem;
  --font-weight: var(--fw-600);
  width: 100%;
}

.blog-card .blog-title:is(:hover, :focus) { color: var(--orange-soda); }

.blog-content-bottom {
  padding-top: 20px;
  border-top: 1px solid hsla(0, 0%, 0%, 0.1);
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-card .read-more-btn {
  color: var(--orange-soda);
  font-size: var(--fs-7);
  font-weight: var(--fw-600);
  text-transform: uppercase;
}

/*-----------------------------------*\
  #ANALYTICS  MODULE
\*-----------------------------------*/
.analytics-module {
    padding-block: var(--section-padding);
    background-color: var(--white);
}
.analytics-module h2 {
    font-size: 2.2rem;
    margin-bottom: 5rem;
    color: var(--prussian-blue-1);
}
.module-flex {
    display: flex;
    gap: 2rem;
    padding-inline: 2rem;
    justify-content: center;
    align-items: center;
}
.module-item {
    flex: 0 0 20%;
    text-align: center;
}
.module-icon img {
    margin-inline: auto;
    margin-bottom: 1.5rem;
}
.module-title {
    font-size: 1.32rem;
    margin-bottom: 1rem;
}
.module-text {
    color: var(--cadet);
    line-height: 1.7;
}
 /*-----------------------------------*\
  #ANALYTIC GROWTH
\*-----------------------------------*/
.analytics-growth {
    padding-block: var(--section-padding);
    background-image: url('/images/background shapes/concrete-background.jpg');
    background-color: var(--cultured-2);
    background-size: cover; 
    background-position: center;
}
.growth-flex {
    display: flex;
    gap: 3rem;
    justify-content: center;
    align-items: center;
}
.growth-item {
    flex: 0 0 45%;
}
.growth-title {
    font-size: 2.2rem;
    font-weight: var(--fw-700);
    color: var(--prussian-blue-1);
    margin-bottom: 1rem;
}
.growth-text{
    font-size: 1.06rem;
    color: var(--cadet);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.growth-text:nth-child(3) {
    margin-bottom: 2rem;
}
.growth-text span {
    margin-top: 1rem;
}
 /*-----------------------------------*\
  #TERMS & CONDITION
\*-----------------------------------*/
.terms {
    padding-block: var(--section-padding);
    background-color: var(--cultured-2);
}
.terms-title {
    color: var(--prussian-blue-1);
    font-size: 1.4rem;
    font-family: var(--ff-poppins);
    margin-bottom: 1rem;
}
.terms-text {
    color: var(--cadet);
    line-height: 1.7;
    margin-bottom: 1rem;
}
 /*-----------------------------------*\
  #COOKIES POLICY
\*-----------------------------------*/
.cookies {
    padding-block: var(--section-padding);
    background-color: var(--cultured-2);
}
.cookies-title {
    color: var(--prussian-blue-1);
    font-size: 1.5rem;
    font-family: var(--ff-poppins);
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.cookies-small-title {
    color: var(--cadet);
    font-size: 1.1rem;
    font-family: var(--ff-poppins);
    margin-bottom: 1rem;
}
.cookies-text, .cookies li {
    font-size: 1.08rem;
    color: var(--cadet);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.cookies li {
    list-style: disc;
    margin-inline: 3rem;
}
.cookies-text a, li a{
    display: inline;
}


 /*-----------------------------------*\
  #PRIVACY POLICY
\*-----------------------------------*/
.privacy {
    padding-block: var(--section-padding);
    background-color: var(--cultured-2);
}
.privacy-title {
    color: var(--prussian-blue-1);
    font-size: 1.5rem;
    font-family: var(--ff-poppins);
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.privacy-small-title {
    color: var(--cadet);
    font-size: 1.1rem;
    font-family: var(--ff-poppins);
    margin-bottom: 1rem;
}
.privacy-text, .privacy li {
    font-size: 1.08rem;
    color: var(--cadet);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.privacy-text span {
    color: var(--prussian-blue-1);
    font-family: var(--ff-poppins);
    margin-bottom: 1rem;
}
.privacy li {
    list-style: disc;
    margin-inline: 3rem;
}
.privacy-text a, li a{
    display: inline;
}
table {
    width: 100%;
    border-collapse: collapse;
    color: var(--cadet);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-block: 2rem;
  }
  
  thead th {
    background-color: #eaeaea6a;
    padding: 10px;
    text-align: left;
    border: 1px solid #ccc;
  }
  
  tbody td {
    padding: 10px;
    border: 1px solid #ccc;
    vertical-align: top;
  }
  td {
    max-width: 7rem;
  }
  
  td, th {
    text-align: left;
  }
    /*-----------------------------------*\
  #REVIEW STYLE
\*-----------------------------------*/

.review-body {
  padding-block: var(--section-padding);
  background-color:var(--white) ;
}
.review-tag {
  padding: 1.5rem 2rem;
  line-height: 1.8;
  border-left: 3px solid var(--prussian-blue-1);
  font-size: 1.01rem;
  margin-bottom: 1rem;
}
.review-card {
  padding: 2rem 15px;
  box-shadow: var(--shadow-2);
}
.review-text {
  margin-bottom: 1rem;
}
.review-btn-box  {
  max-width: 30%;
}
.review-btn-box a {
  margin-top: 0;
  display: flex;
  max-width: 25%;
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  max-width: 24%;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid black;
}

.divider:not(:empty)::before {
  margin-right: 10px;
}

.divider:not(:empty)::after {
  margin-left: 10px;
}
  /*-----------------------------------*\
  #REVIEW FAQ STYLE
\*-----------------------------------*/
.review-faq {
  padding-block: var(--section-padding);
  padding-top: 10px;
  background-color:var(--white);
}
.review-faq h2{
  margin-bottom: 1rem;
}
.accordion {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.accordion-item {
  border-bottom: 1px solid #ddd;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  background-color: #f9f9f9;
  font-size: 16px;
  font-weight: bold;
}

.accordion-header:hover {
  background-color: #e9e9e9;
}

.accordion-content {
  display: none;
  padding: 15px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}
.accordion-content p {
  line-height: 1.7;
  margin-bottom: 1rem;
}
.accordion-content p a{
  display: inline;  
}
.accordion-icon {
  font-size: 20px;
  color: #007bff;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid #007bff;
}
.review-footer {
  padding-top: 2rem;
}
.review-footer-text {
  margin-bottom: 1rem;
  line-height: 1.7;
  font-size: .7rem;
}
  /*-----------------------------------*\
  #VERIFY STYLE
\*-----------------------------------*/

.sec{
    /* background-color: #2dace7; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem;
}
.card{
    flex-grow: 1;
    flex-basis: 200;
    padding: 4px;
    background-color: var(--white-1);
    max-width: 10rem;
    max-height: 15rem;
    overflow: hidden;
    border-radius: 10px;
    text-align: center;
    box-shadow: var(--shadow-2);
}
svg{ 
    color: var(--orange-soda);
    box-shadow: var(--shadow-2);
}
svg:hover{ 
    /* color: var(--orange-soda); */
    box-shadow: var(--shadow-3);
}
.text{ 
    font-size: var(--fs-5);
    font-weight: var(--fw-500);
    margin-bottom: 4px;
    margin-top: 5px;
}

/*-----------------------------------*\
  #CTA
\*-----------------------------------*/

.cta {
    background: linear-gradient(to bottom, var(--white) 50%, var(--raisin-black-1) 50%);
  }  
  .cta-card {
    background: var(--orange-soda);
    padding: 50px 25px;
    box-shadow: var(--shadow-2);
  }
  
  .cta-card .card-content {
    max-width: max-content;
    margin-inline: auto;
    margin-bottom: 30px;
  }
  
  .cta-card .card-title {
    color: var(--white);
    line-height: 1.3;
    margin-bottom: 15px;
  }
  
  .cta-card .card-text {
    color: var(--white);
    font-size: var(--fs-5);
    line-height: 1.8;
  }
  
  .cta-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--black);
    background: var(--white);
    box-shadow: var(--shadow-2);
    border-color: var(--white);
    margin-inline: auto;
  }
  
  .cta-btn:is(:hover, :focus) {
    background: none;
    color: var(--white);
    border-color: transparent;
  }
  
  .cta-btn::before { background: var(--black); }


/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer {
    background: var(--raisin-black-1);
    color: var(--white);
    margin-bottom: 68px;
  }
  
  .footer .container { padding-inline: 30px; }
  
  .footer a { color: inherit; display: inline-block;}

  
  .footer-top {
    padding-top: 80px;
    padding-bottom: 40px;
  }
  
  .footer-brand { margin-bottom: 70px; }
  
  .footer-brand .logo { margin-bottom: 15px; }
  
  .section-text {
    font-size: var(--fs-5);
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 45ch;
    transition: .5s ease;
  }
  .section-text a:hover { border-bottom: solid 2px var(--white); }
  
  .contact-list {
    display: grid;
    gap: 15px;
    margin-bottom: 30px;
  }
  
  .contact-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  
  .contact-link ion-icon { font-size: 18px; }
  
  .contact-link :is(address, span) {
    font-size: var(--fs-5);
    transition: var(--transition);
  }
  
  .contact-link:is(:hover, :focus) span { color: var(--orange-soda); }
  
  .social-list {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .footer-list:not(:last-child) { margin-bottom: 50px; }
  
  .footer-list-title {
    font-family: var(--ff-poppins);
    font-size: var(--fs-3);
    font-weight: var(--fw-700);
    margin-bottom: 15px;
  }
  
  .footer-link {
    font-size: var(--fs-5);
    padding: 10px 7px;
  }
  
  .footer-link:is(:hover, :focus) { color: var(--orange-soda); border-left: solid 3px var(--orange-soda);}
  
  .footer-bottom {
    background: var(--raisin-black-2);
    padding-block: 25px;
  }
  
  .copyright {
    font-size: var(--fs-5);
    text-align: center;
  }
  
  .copyright a { display: inline-block; }
  
  .copyright a:is(:hover, :focus) { color: var(--orange-soda); }

  

    /*-----------------------------------*\
    #MEDIA QUERIES
  \*-----------------------------------*/
    /**
   * responsive for lesser than 479px screen
   */
   @media (max-width: 479px)  {
    /**
   * REUSE
   */
   .heading{
    font-size: 1.5rem;
   }
   .btn {
    margin-inline: auto;
   }
   .notice {
      padding-inline: 1rem;
   }
   .notice-flex {
      display: block;
      text-align: center;
      padding-inline: 1rem;
   }
   #notice-content-left,  #notice-content-right {
      max-width: 100%;
      margin-bottom: 2rem;
  }
  .notice-icon img {
      max-width: 55%;
      margin-inline: auto;
  }
  .notice-content h2 {
      text-align: center;
      font-size: 1.2rem;
      margin-bottom: 1.2rem;
  }
  .notice-text {
      font-size: 1rem;
  }
  .tag {
      padding-inline: 1rem;
      font-size: 1.2rem; 
  }
  .tag-1 {
      padding-inline: 1rem;
  }
  
  .tag-1 h3 {
  font-size: 1.5rem;
  }
/*-----------------------------------*\
#HEADER
\*-----------------------------------*/
  .header-top-link {
    font-size: var(--fs-7);
}

/*-----------------------------------*\
#BANNER
\*-----------------------------------*/
.banner{
  min-height: 100%;
}
.banner-sticky {
  min-height: 70vh;
}
.banner-wrapper{
  max-width: 100%;
  margin: 0;
}
.banner-wrapper ion-icon {
  font-size: 1.2rem;
  margin-inline: auto;
}
.banner-wrapper h2 {
  font-size: 1.5rem;
  margin-inline: auto;
  width: 100%;
}
.banner-wrapper a {
  font-size: .9rem;
  margin-inline: auto;
  line-height: 1.5rem;
}
/*-----------------------------------*\
#BANNER2
\*-----------------------------------*/
.banner2{
  min-height: 15vh;
  padding-block: 20px;
}
.banner2-wrapper{
  padding-top: 1rem;
}
.banner2-wrapper ion-icon {
  font-size: 2.5rem;
  
}
.banner2-wrapper h2 {
  font-size: 2.3rem;
}
.banner2-wrapper a {
  font-size: 1rem;
  margin-bottom: 10px;
}

/*-----------------------------------*\
#ABOUT COUNT
\*-----------------------------------*/
.about-count .h3 {
  font-size: 2rem;
  
}
.count-flex {
  display: block;
}
.count-card {
  margin-bottom: 3rem;
}

/*-----------------------------------*\
#ABOUT CTA
\*-----------------------------------*/
.cta-flex {
  display: block;
}
.left-text {
  max-width: 100%;
  font-size: 1.2rem;
  line-height: 1.1;
  margin-bottom: 2rem;
}
.right-text {
  line-height: 1.1;
}

/*-----------------------------------*\
#ABOUT TEAM
\*-----------------------------------*/
.team-flex {
  display: block;
  padding: 0 1rem;
}

.team-card {
  margin-bottom: 3rem;
}

.team-card:nth-child(4) {
  max-width: 100%;
}
/*-----------------------------------*\
#SERVICE QUOTE
\*-----------------------------------*/

.quote-flex{
  display: block;
  padding-inline: 1rem;
}
.quote-icon  {
  margin-bottom: 1rem;
}
.quote-icon img {
  max-width: 98%;
}

/*-----------------------------------*\
#SERVICE ROW
\*-----------------------------------*/

.row-list {
  display: block;
}
.row-card {
  padding: 2rem 1rem;
  margin-bottom: 1rem;
}

.row-card-title{
  font-size: 1.1rem;
}
.row-card-text {
  font-size: .95rem;
}

/*-----------------------------------*\
#SERVICE INVEST
\*-----------------------------------*/
.service-invest {
  padding-inline: 1rem;
}
.invest-logo {
  position: absolute;
}
.invest-logo img {
  max-width: 80%;
}
.invest-title {
  font-size: 1.2rem;
  padding-top: 3rem;
  margin-bottom: 2rem;
  line-height: 1.5;
}
.invest-flex {
  display: block;
}
.invest-item {
  margin-bottom: 2rem;
}
.invest-item-heading {
  font-size: 1.2rem;
}
.invest-item-text {
  line-height: 1.7;
  font-size: .87rem;
}
/*-----------------------------------*\
#CONTACT OFFICE
\*-----------------------------------*/
.office{
  background-position: center;
}
.office-flex {
  display: block;
  padding-inline: 1rem;
}
.office-card {
  margin-bottom: 1.9rem;
}
.office-title {
  margin-bottom: .4rem;
}

/*-----------------------------------*\
#CONTACT-FORM
\*-----------------------------------*/

.contact-form form {
  max-width: 100%;
  padding: 2rem 1rem;
}
.contact-form fieldset {
  padding: 2rem;
}
.data-flex {
  display: block;
}
.contact-form textarea {
  min-height: 10rem;
  max-height: 10rem;
  resize: none;
  margin-bottom: 1rem;
}
.contact-form-text{
  font-size: .7rem;
  margin-bottom: 1rem;
}
.contact-form-text a{
  display: inline;
}
.contact-form button {
  width: 100%;
  text-align: center;
}
/*-----------------------------------*\
#CONTAINERS
\*-----------------------------------*/
.terms .container, .cookies .container, .analytics-growth .container,  .privacy .container {
  padding-inline: 2rem;
}

/*-----------------------------------*\
#ANALYTICS
\*-----------------------------------*/

.module-flex {
  display: block;
 
}
.module-item {
  margin-bottom: 4rem;
}

.growth-flex {
  display: block;

}
.growth-item {
  margin-bottom: 4rem;
}
.review-btn-box {
  min-width: 100%;
}
/*-----------------------------------*\
#BLOG
\*-----------------------------------*/
.blog .container {
  padding-inline: 1.3rem;
}
.has-scrollbar {
  margin-bottom: 3rem;
}

  /**
   * FOOTER
   */

   .footer { --fs-5: 1rem;}

   .footer-link-box { flex-basis: 500px; }

   /* .footer-list { flex-basis: 500px; } */

   .footer-brand{ min-width: 50%;}


}

@media (min-width: 479px) and (max-width: 900px) {

/*-----------------------------------*\
#CONTACT-FORM
\*-----------------------------------*/

.contact-form form {
  max-width: 100%;
  padding: 2rem 1rem;
}
.contact-form fieldset {
  padding: 2rem;
}
.data-flex {
  display: block;
}
.contact-form textarea {
  min-height: 10rem;
  max-height: 10rem;
  resize: none;
  margin-bottom: 1rem;
}
.contact-form-text{
  font-size: .7rem;
  margin-bottom: 1rem;
}
.contact-form-text a{
  display: inline;
}
.contact-form button {
  width: 100%;
  text-align: center;
}
}
    /**
   * responsive for larger than 480px screen and lesser than 767px screen
   */
   @media (min-width: 480px) and (max-width: 767px) {
    /**
   * REUSE
   */
   .heading{
    font-size: 1.5rem;
   }
   .btn {
    margin-inline: auto;
   }
   .notice {
      padding-inline: 1rem;
   }
   .notice-flex {
      display: block;
      text-align: center;
      padding-inline: 1rem;
   }
   #notice-content-left,  #notice-content-right {
      max-width: 100%;
      margin-bottom: 2rem;
  }
  .notice-icon img {
      max-width: 55%;
      margin-inline: auto;
  }
  .notice-content h2 {
      text-align: center;
      font-size: 1.2rem;
      margin-bottom: 1.2rem;
  }
  .notice-text {
      font-size: 1rem;
  }
  .tag {
    padding-inline: 1rem;
    font-size: 1.2rem; 
  }
  .tag-1 {
      padding-inline: 1rem;
  }
  
  .tag-1 h3 {
  font-size: 1.5rem;
  }
/*-----------------------------------*\
#HEADER
\*-----------------------------------*/
  .header-top-link {
    font-size: var(--fs-7);
}

/*-----------------------------------*\
#BANNER
\*-----------------------------------*/
.banner{
  min-height: 100%;
}
.banner-sticky {
  min-height: 70vh;
}
.banner-wrapper{
  max-width: 100%;
  margin: 0;
}
.banner-wrapper ion-icon {
  font-size: 1.2rem;
  margin-inline: auto;
}
.banner-wrapper h2 {
  font-size: 1.5rem;
  margin-inline: auto;
  width: 100%;
}
.banner-wrapper a {
  font-size: .9rem;
  margin-inline: auto;
  line-height: 1.5rem;
}
/*-----------------------------------*\
#BANNER2
\*-----------------------------------*/
.banner2{
  min-height: 15vh;
  padding-block: 20px;
}
.banner2-wrapper{
  padding-top: 1rem;
}
.banner2-wrapper ion-icon {
  font-size: 2.5rem;
  
}
.banner2-wrapper h2 {
  font-size: 2.3rem;
}
.banner2-wrapper a {
  font-size: 1rem;
  margin-bottom: 10px;
}


/*-----------------------------------*\
#ABOUT COUNT
\*-----------------------------------*/
.about-count .h3 {
  font-size: 1.2rem;
}
.count-flex {
  display: block;
}
.count-card {
  margin-bottom: 3rem;
}

/*-----------------------------------*\
#ABOUT CTA
\*-----------------------------------*/
.cta-flex {
  display: block;
}
.left-text {
  max-width: 100%;
  font-size: 1.2rem;
  line-height: 1.1;
  margin-bottom: 2rem;
}
.right-text {
  line-height: 1.1;
}

/*-----------------------------------*\
#ABOUT TEAM
\*-----------------------------------*/
.team-flex {
  display: block;
  padding: 0 1rem;
}

.team-card {
  margin-bottom: 3rem;
}

.team-card:nth-child(4) {
  max-width: 100%;
}
/*-----------------------------------*\
#SERVICE QUOTE
\*-----------------------------------*/

.quote-flex{
  display: block;
  padding-inline: 1rem;
}
.quote-icon  {
  margin-bottom: 1rem;
}
.quote-icon img {
  max-width: 98%;
}

/*-----------------------------------*\
#SERVICE ROW
\*-----------------------------------*/

.row-list {
  display: block;
}
.row-card {
  padding: 2rem 1rem;
  margin-bottom: 1rem;
}

.row-card-title{
  font-size: 1.1rem;
}
.row-card-text {
  font-size: .95rem;
}

/*-----------------------------------*\
#SERVICE INVEST
\*-----------------------------------*/
.service-invest {
  padding-inline: 1rem;
}
.invest-logo {
  position: absolute;
}
.invest-logo img {
  max-width: 80%;
}
.invest-title {
  font-size: 1.2rem;
  padding-top: 3rem;
  margin-bottom: 2rem;
  line-height: 1.5;
}
.invest-flex {
  display: block;
}
.invest-item {
  margin-bottom: 2rem;
}
.invest-item-heading {
  font-size: 1.2rem;
}
.invest-item-text {
  line-height: 1.7;
  font-size: .87rem;
}
/*-----------------------------------*\
#CONTACT OFFICE
\*-----------------------------------*/
.office{
  background-position: center;
}
.office-flex {
  display: block;
  padding-inline: 1rem;
}
.office-card {
  margin-bottom: 1.9rem;
}
.office-title {
  margin-bottom: .4rem;
}


/*-----------------------------------*\
#CONTAINERS
\*-----------------------------------*/
.terms .container, .cookies .container, .analytics-growth .container,  .privacy .container {
  padding-inline: 2rem;
}

/*-----------------------------------*\
#ANALYTICS
\*-----------------------------------*/

.module-flex {
  display: block;
 
}
.module-item {
  margin-bottom: 4rem;
}

.growth-flex {
  display: block;

}
.growth-item {
  margin-bottom: 4rem;
}

/*-----------------------------------*\
#BLOG
\*-----------------------------------*/
.blog .container {
  padding-inline: 1.3rem;
}
.has-scrollbar {
  margin-bottom: 3rem;
}

.review-btn-box {
  min-width: 100%;
}

  /**
   * FOOTER
   */
   .footer {   --fs-5: 1rem;}

   .footer-link-box { flex-basis: 500px; }

   /* .footer-list { flex-basis: 500px; } */

   .footer-brand{ min-width: 50%;}


}

  /**
   * responsive for larger than 600px screen
   */
  
   @media (min-width: 600px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-2: 1.875rem;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container {
      max-width: 550px;
      margin-inline: auto;
    }
  
    .has-scrollbar {
      gap: 25px;
      margin-inline: -25px;
      padding-inline: 25px;
      scroll-padding-left: 25px;
    }
  
    .has-scrollbar > li { min-width: calc(50% - 12.5px); }
  
  
  
    /**
     * SERVICE
     */
  
    .service-list > li { width: calc(50% - 15px); }
  
  
  
    /**
     * PROPERTY
     */
  
    .property .container {
      max-width: unset;
      padding-inline: 25px;
    }
  
  
  
    /**
     * CTA
     */
  
    .cta-card { --fs-2: 1.5rem; }

  /*-----------------------------------*\
#CONTACT OFFICE
\*-----------------------------------*/
.office{
  background-position: center;
}
.office-flex {
  display: grid;
  grid-template-columns: 2fr 1fr;
  padding-inline: 1rem;
}
.office-card {
  margin-bottom: 1.9rem;
}
.office-title {
  margin-bottom: .4rem;
}


.review-btn-box {
  min-width: 100%;
}
  
    /**
     * FOOTER
     */
  
    .footer-link-box {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }

    .section-text {
        max-width: 100%;
    }
  
  }


  /**
   * responsive for larger than 768px screen
   */
  
   @media (min-width: 768px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-1: 2.5rem;
      --fs-5: 0.938rem;
      --fs-6: 0.875rem;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 720px; }
  
    .btn {
      --fs-5: 1rem;
      padding: 12px 28px;
    }
  
  
  
    /**
     * HEADER
     */
  
    .header-top { padding-block: 5px; }
  
    .header-top .wrapper { margin-left: auto; }
  
    .header-top-social-list { gap: 12px; }
  
    .header-top-social-link { font-size: 1rem; }
  
    .header-top-btn { padding: 10px 20px; }
  
    .header-bottom-actions {
      all: unset;
      display: flex;
      align-items: center;
      gap: 10px;
    }
  
    .header-bottom .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .header-bottom-actions-btn ion-icon { margin-bottom: 0; }
  
    .header-bottom-actions-btn span { display: none; }
  
    .header-bottom-actions-btn {
      background: var(--white);
      width: 50px;
      height: 50px;
      box-shadow: var(--shadow-2);
    }
  
  
    /**
     * BANNER
     */
     .banner {
      min-height: 40vh;
  }
  
  
    /**
     * ABOUT COUNT
     */
  
     .count-flex {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
  }
       /**
     * ABOUT TEAM
     */
  .about-team .container {
    max-width: 800px;
  }
  .team-flex {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    margin: auto;
}
.team-card:nth-child(4) {
  grid-column: span 1;
  max-width: 100%;
}
.team-card:nth-child(7) {
  position: relative;
  left: 50%;
}
  
  
  
    /**
     * FEATURES
     */
  
    .features-list > li { width: calc(33.33% - 13.33px); }
  
    .features-card { gap: 20px; }
  
    .features-card .card-icon {
      width: 80px;
      height: 80px;
      font-size: 32px;
    }
  
    .features-card .card-title { --fs-6: 1.125rem; }
  
  
  
    /**
     * BLOG
     */
  
    .blog-card { --fs-7: 0.875rem; }
  
    .blog-title { font-size: 1.25rem; }
  
    .blog .card-meta-list { gap: 30px; }
  
  
  
    /**
     * CTA
     */
  
    .cta-card { --fs-2: 1.625rem; }
  
  
    .review-btn-box {
      min-width: 100%;
    }


    /**
     * FOOTER
     */
  
    .footer { margin-bottom: 0; }

    .section-text {
        max-width: 100%;
    }
  
  }
  
  
  /**
   * responsive for larger than 992px screen
   */
  
  @media (min-width: 992px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-1: 3.125rem;
      --fs-4: 1.375rem;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 970px; }
  
    .btn { padding: 15px 40px; }
  
  
  
    /**
     * HEADER
     */
  
    .header-top-list,
    .header-top .wrapper { gap: 30px; }
  
  
  
    /**
     * BANNER
     */
     .banner {
      min-height: 40vh;
  }
  
  
    /**
     * ABOUT
     */
  
    .about .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 60px;
    }
  
    .about-banner { margin-bottom: 0; }
  
    .about-banner > img { width: 100%; }
  
  
  
    /**
     * SERVICE
     */
  
    .service-list > li { width: calc(33.33% - 20px); }
  
  
  
    /**
     * PROPERTY
     */
  
    .property-card .card-content { padding-inline: 30px; }
  
    .card-footer { padding: 20px 30px 30px; }
  
  
  
    /**
     * FEATURES
     */
  
    .features-list { column-gap: 30px; }
  
    .features-list > li { width: calc(25% - 30px); }
  
  
  
    /**
     * BLOG
     */
  
    .blog-title { font-size: 1.375rem; }
  
  
  
    /**
     * CTA
     */
  
    .cta-card {
      --fs-2: 1.875rem;
      --fs-5: 1rem;
  
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 50px;
    }
  
    .cta-card :is(.card-content, .cta-btn) { margin: 0; }
  
  
  
    /**
     * FOOTER
     */
  
    .footer-top .container {
      display: flex;
      justify-content: space-between;
    }
  
    .footer-brand {
      min-width: 50%;
      margin-bottom: 0;
    }
  
    .footer-link-box { flex-basis: 400px; }

    .section-text {
        max-width: 46ch;
    }


  
  } 
  
  
  /**
   * responsive for larger than 1200px screen
   */
  
  @media (min-width: 1200px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-2: 2.75rem;
      --fs-4: 1.5rem;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 1200px; }
  
    .has-scrollbar > li { min-width: calc(33.33% - 16.66px); }
  
  
  
    /**
     * HEADER
     */
  
    .header-bottom { padding-block: 30px; top: 30.62%;}
  
    .header-bottom-actions-btn:last-child,
    .navbar-top,
    .overlay { display: none; }
  
    .navbar,
    .navbar.active { all: unset; }
  
    .navbar-list {
      display: flex;
      align-items: center;
      gap: 30px;
    }
  
    .navbar-link {
      color: var(--dark-jungle-green);
      --fs-5: 1.125rem;
      text-transform: capitalize;
    }
  
    .header { padding-bottom: 114px; }
  
    .header-bottom {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
    }
  
    .header.active .header-bottom {
      position: fixed;
      bottom: auto;
      top: -94px;
      padding-block: 20px;
      box-shadow: 0 10px 50px hsla(237, 71%, 52%, 0.2);
      animation: slideDown 0.25s ease-out forwards;
    }
  
    @keyframes slideDown {
      0% { transform: translateY(0); }
      100% { transform: translateY(100%); }
    }
  
  
  
    /**
     * HERO
     */
  
    .hero-text {
      padding-left: 30px;
      max-width: 450px;
      margin-bottom: 40px;
    }
  
  
  
    /**
     * FEATURES
     */
  
    .features-card .card-icon {
      width: 100px;
      height: 100px;
      font-size: 45px;
    }
  
    .features-card .card-title { --fs-6: 1.375rem; }
  
  
  
    /**
     * CTA
     */
  
    .cta-card {
      --fs-2: 2.25rem;
      padding-inline: 60px;
    }
  
  
  
    /**
     * FOOTER
     */
  
    .footer { --fs-5: 1rem; }
  
    .footer-link-box { flex-basis: 400px; }

    .footer-brand{ min-width: 50%;}
  
  }