/*----------------------------------------------------------------------------------------------------------------------
Project:	    CreaSoon
Version:        1.0.0

Default Color   #000;

Body copy:		'Monsterat', sans-serif; 14px;
Headers:		'Monsterat', sans-serif;

----------------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------------------------------------------------
[Table of contents]

A. Basic Styling
  -- Styling

B. Helpers
  -- Animations
  -- Universal Classes

C. Components
  -- Background
  -- Box
  -- Content wrapper
  -- Count-down
  -- Footer
  -- Forms
  -- Header
  -- Magnific popup
  -- Map
  -- Modal
  -- Page wrapper
  -- Parallax
  -- Person
  -- Skill
  -- Social icons
  -- Work;

----------------------------------------------------------------------------------------------------------------------*/

/***********************************************************************************************************************
A. Basic Styling
***********************************************************************************************************************/

body, html {
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    overflow: hidden;
    position: relative;
    margin-right: 0 !important;
    margin: 0;
}

a {
    transition: .4s ease;
    outline: none !important;
    color: #000;
}

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

a.icon i {
    margin-right: .375rem;
    margin-left: .375rem;
}

dl dt {
    float: left;
}

dl dd {
    text-align: right;
    margin-bottom: .375rem;
}

h1 {
    font-size: 5rem;
    font-weight: bold;
}

h2 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.125rem;
    font-weight: bold;
}

h5 {
    font-size: .875rem;
}

p {
    opacity: .6;
}

img {
    max-width: 100%;
}

section {
    margin-bottom: 2.5rem;
}

/***********************************************************************************************************************
B. Helpers
***********************************************************************************************************************/

/* Animate */

.animate {
    transition: .6s;
    opacity: 0;
    transform: scale(.98);
}

.animate.idle {
    opacity: 1;
    transform: scale(1);
}

.background-wrapper, .active-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.background-wrapper img, .active-slider img {
    width: 100%;
    height: auto;
}

.background-wrapper .map, .active-slider .map {
    height: 100%;
}

.background-wrapper .background-color, .active-slider .background-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.background-wrapper .background-color.background-color-white,
.active-slider .background-color.background-color-white {
    background-color: #fff;
}

.background-wrapper .background-color.background-color-black,
.active-slider .background-color.background-color-black {
    background-color: #000;
}

.bg-transfer {
    background-size: cover;
    background-position: center center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    width: 100%;
}

.bg-transfer img {
    display: none !important;
}

.bg-transfer.bg-fixed {
    background-attachment: fixed;
    background-size: 100%;
    background-position: top center;
}

.center {
    text-align: center;
}

.note {
    opacity: .4;
    font-size: .75rem;
    margin: .5rem 0;
}

.shadow {
    box-shadow: 0 .0625rem .625rem rgba(0, 0, 0, .07);
}

.font-size-10 {
    font-size: .625rem;
}

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

.font-size-30 {
    font-size: 1.875rem;
}

.font-size-40 {
    font-size: 2.5rem;
}

.font-size-50 {
    font-size: 3.125rem;
}

.font-size-60 {
    font-size: 3.75rem;
}

.font-size-70 {
    font-size: 4.375rem;
}

.font-size-80 {
    font-size: 5rem;
}

.font-size-90 {
    font-size: 5.625rem;
}

.font-size-100 {
    font-size: 6.25rem;
}

.font-size-110 {
    font-size: 6.875rem;
}

.font-size-120 {
    font-size: 7.5rem;
}

.opacity-90 {
    opacity: .9;
}

.opacity-80 {
    opacity: .8;
}

.opacity-70 {
    opacity: .7;
}

.opacity-60 {
    opacity: .6;
}

.opacity-50 {
    opacity: .5;
}

.opacity-40 {
    opacity: .4;
}

.opacity-30 {
    opacity: .3;
}

.opacity-20 {
    opacity: .2;
}

.opacity-19 {
    opacity: .19;
}

.opacity-18 {
    opacity: .18;
}

.opacity-17 {
    opacity: .17;
}

.opacity-16 {
    opacity: .16;
}

.opacity-15 {
    opacity: .15;
}

.opacity-14 {
    opacity: .14;
}

.opacity-13 {
    opacity: .13;
}

.opacity-12 {
    opacity: .12;
}

.opacity-11 {
    opacity: .11;
}

.opacity-10 {
    opacity: .1;
}

.opacity-9 {
    opacity: .09;
}

.opacity-8 {
    opacity: .08;
}

.opacity-7 {
    opacity: .07;
}

.opacity-6 {
    opacity: .06;
}

.opacity-5 {
    opacity: .05;
}

.opacity-4 {
    opacity: .04;
}

.opacity-3 {
    opacity: .03;
}

.opacity-2 {
    opacity: .02;
}

.opacity-1 {
    opacity: .01;
}

.opacity-0 {
    opacity: 0;
}

/***********************************************************************************************************************
C. Components
***********************************************************************************************************************/

/* Background */

#background-content {
    height: 100%;
    width: 100%;
}

/* -- Box */

.box {
    margin-bottom: 1.875rem;
}

.box .icon {
    margin-top: .9375rem;
}

/* -- Content Wrapper */

.content-wrapper {
    display: table;
    height: 100%;
    width: 100%;
    position: absolute;
}

.content-wrapper .content-main {
    text-align: center;
    z-index: 1;
    pointer-events: none;
    display: table-cell;
    vertical-align: middle;
    position: relative;
}

.content-wrapper .content-main h1 {
    margin-bottom: 2.5rem;
}

.content-wrapper .content-main h2 {
    margin-top: 1.25rem;
    margin-bottom: 2.5rem;
}

.content-wrapper .content-main form {
    pointer-events: auto;
    margin-top: 1.875rem;
    margin-bottom: 1.25rem;
}

.content-wrapper .content-main .container {
    z-index: 1;
    position: relative;
}

/* -- Count Down */

.count-down {
    margin-bottom: 3.75rem;
}

.count-down .countdown-row {
    width: 100%;
}

.count-down .countdown-row.countdown-show4 .countdown-section {
    width: 25%;
}

.count-down .countdown-row.countdown-show3 .countdown-section {
    width: 33%;
}

.count-down .countdown-row.countdown-show2 .countdown-section {
    width: 50%;
}

.count-down .countdown-row.countdown-show1 .countdown-section {
    width: 100%;
}

.count-down .countdown-row .countdown-section {
    display: inline-block;
    position: relative;
}

.count-down .countdown-row .countdown-amount {
    font-size: 3.75rem;
    font-weight: bold;
    display: block;
    margin-bottom: -1.25rem;
    position: relative;
}

.count-down .countdown-row .countdown-period {
    opacity: .5;
    font-size: .75rem;
    text-transform: uppercase;
}

/* -- Footer */

footer {
    position: absolute;
    bottom: .625rem;
    text-align: center;
    width: 100%;
}

footer .social-icons a {
    opacity: .5;
    color: #000;
    padding: .3125rem .625rem;
    display: inline-block;
    font-size: 1.125rem;
}

footer .social-icons a:hover {
    opacity: 1;
}

input[type="text"], input[type="email"], input[type="date"], input[type="time"],
input[type="search"], input[type="password"], input[type="number"],
input[type="tel"], textarea.form-control {
    border-radius: 0;
    transition: .3s;
    box-shadow: none;
    -webkit-appearance: none;
    background-color: rgba(0, 0, 0, .03);
    border: 0 solid transparent;
    color: rgba(0, 0, 0, .6);
    outline: none !important;
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: .75rem;
    padding-right: .75rem;
    width: 100%;
    height: inherit;
    font-size: .875rem;
}

input[type="text"]:active, input[type="text"]:focus, input[type="email"]:active,
input[type="email"]:focus, input[type="date"]:active, input[type="date"]:focus,
input[type="time"]:active, input[type="time"]:focus, input[type="search"]:active,
input[type="search"]:focus, input[type="password"]:active,
input[type="password"]:focus, input[type="number"]:active,
input[type="number"]:focus, input[type="tel"]:active, input[type="tel"]:focus,
textarea.form-control:active, textarea.form-control:focus {
    box-shadow: none;
    background-color: rgba(0, 0, 0, .06);
    border-color: #fff;
}

input[type="text"]:hover, input[type="email"]:hover, input[type="date"]:hover,
input[type="time"]:hover, input[type="search"]:hover,
input[type="password"]:hover, input[type="number"]:hover,
input[type="tel"]:hover, textarea.form-control:hover {
    box-shadow: none;
    background-color: rgba(0, 0, 0, .06);
}

form.has-background {
    border-radius: .3125rem;
    background-color: rgba(0, 0, 0, .3);
    padding: 1.25rem;
}

form.submitted .status {
    transform: scale(1);
}

form.submitted .form-group, form.submitted .input-group {
    pointer-events: none;
}

form .status {
    transform: scale(.1);
    transition: .4s ease;
    top: -1.25rem;
    right: -1.25rem;
    position: absolute;
}

form .status .status-icon {
    border-radius: 50%;
    transition: .4s ease;
    width: 2.5rem;
    height: 2.5rem;
    background-color: grey;
    color: #fff;
    text-align: center;
    line-height: 2.5rem;
}

form .status .status-icon.valid {
    background-color: #50aa8d;
}

form .status .status-icon.invalid {
    background-color: #e45544;
}

form .status i {
    font-size: 1.125rem;
}

.form ::-webkit-input-placeholder {
    color: rgba(0, 0, 0, .3);
}

.form :-moz-placeholder {
    color: rgba(0, 0, 0, .3);
}

.form ::-moz-placeholder {
    color: rgba(0, 0, 0, .3);
}

.form :-ms-input-placeholder {
    color: rgba(0, 0, 0, .3);
}

.input-group {
    box-shadow: .0625rem .0625rem .5rem rgba(0, 0, 0, .07);
    border-radius: 3.125rem;
    width: 100%;
    overflow: hidden;
}

.input-group .input-group-btn {
    position: absolute;
    height: 100%;
    right: 0;
    width: auto;
    z-index: 5;
}

.input-group .input-group-btn .btn {
    transform: scale(.8);
    border-radius: 100%;
    transition: .4s ease;
    border: .1875rem solid rgba(0, 0, 0, .03);
    background-color: transparent;
    height: 100%;
    outline: none !important;
    width: 5rem;
    font-size: 1.5rem;
}

.input-group .input-group-btn .btn:hover {
    background-color: rgba(0, 0, 0, .03);
}

.input-group input[type="text"], .input-group input[type="email"],
.input-group input[type="date"], .input-group input[type="time"],
.input-group input[type="search"], .input-group input[type="password"],
.input-group input[type="number"], .input-group input[type="tel"],
.input-group textarea.form-control {
    border-radius: 0;
    transition: .3s;
    box-shadow: none;
    -webkit-appearance: none;
    background-color: #fff;
    border: .125rem solid #fff;
    color: rgba(0, 0, 0, .6);
    outline: none !important;
    padding-top: 1.5625rem;
    padding-bottom: 1.5625rem;
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
    width: 100%;
    height: inherit;
    font-size: 1.125rem;
}

.input-group input[type="text"]:active, .input-group input[type="text"]:focus,
.input-group input[type="email"]:active, .input-group input[type="email"]:focus,
.input-group input[type="date"]:active, .input-group input[type="date"]:focus,
.input-group input[type="time"]:active, .input-group input[type="time"]:focus,
.input-group input[type="search"]:active,
.input-group input[type="search"]:focus,
.input-group input[type="password"]:active,
.input-group input[type="password"]:focus,
.input-group input[type="number"]:active,
.input-group input[type="number"]:focus, .input-group input[type="tel"]:active,
.input-group input[type="tel"]:focus, .input-group textarea.form-control:active,
.input-group textarea.form-control:focus {
    box-shadow: none;
    background-color: #fff;
    border-color: #fff;
}

.input-group input[type="text"]:hover, .input-group input[type="email"]:hover,
.input-group input[type="date"]:hover, .input-group input[type="time"]:hover,
.input-group input[type="search"]:hover,
.input-group input[type="password"]:hover,
.input-group input[type="number"]:hover, .input-group input[type="tel"]:hover,
.input-group textarea.form-control:hover {
    box-shadow: none;
    background-color: #fff;
}

.form-group .btn {
    padding-top: .875rem;
    padding-bottom: .875rem;
}

/* -- Header */

.page-wrapper header {
    position: fixed;
    z-index: 999;
    padding: 1.875rem;
    display: table;
    width: 100%;
    pointer-events: none;
}

.page-wrapper header .brand {
    text-align: left;
    display: table-cell;
    vertical-align: middle;
    pointer-events: auto;
}

.page-wrapper header nav {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.page-wrapper header nav .navigation li {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}

.page-wrapper header nav .navigation li a {
    padding: .3125rem .375rem;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1rem;
    pointer-events: auto;
}

header .brand img {
    width: 200px;
    max-width: 100%;
    height: auto;
}

/* -- Magnific Popup */

.mfp-wrap {
    z-index: 2000;
}

.mfp-bg {
    z-index: 1999;
}

/* -- Map */

#map {
    height: 12.5rem;
    width: 100%;
}

/* -- Modal */

.modal {
    text-align: center;
}

.modal.fade .modal-dialog {
    transform: translate(0, 0) scale(.95);
}

.modal.fade.in .modal-dialog {
    transform: translate(0, 0) scale(1);
}

.modal-dialog {
    width: auto;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    max-width: 100%;
}

.modal-dialog .modal-content {
    border-radius: 0;
    border: none;
}

.modal-dialog .modal-content h2 {
    font-size: 2.25rem;
    font-weight: bold;
}

.modal-dialog .modal-content h3 {
    font-size: 1.5rem;
    margin-bottom: 1.875rem;
}

.modal-dialog .modal-content .modal-header {
    border-bottom: none;
    padding: 4.0625rem 2.8125rem;
}

.modal-dialog .modal-content .modal-header .close {
    opacity: 1;
    background-color: #fff;
    padding: .625rem .875rem;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0;
}

.modal-dialog .modal-content .modal-body {
    padding: 2.1875rem 2.8125rem;
}

/* -- Page Wrapper */

.page-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

/* -- Parallax */

.parallax {
    position: absolute;
    bottom: 0;
    list-style: none;
    margin-bottom: 0;
}

.parallax img {
    max-width: inherit;
    width: auto;
    position: absolute;
    bottom: 0;
}

/* -- Person */

.person h4 {
    margin-bottom: .3125rem;
}

.person h5 {
    opacity: .7;
    margin-top: .3125rem;
}

.person .image {
    border-radius: 100%;
    height: 7.5rem;
    width: 7.5rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: inline-block;
}

/* -- Skill */

.skill {
    position: relative;
    margin-bottom: 2.5rem;
}

.skill h4 {
    font-size: .875rem;
    text-transform: uppercase;
}

.skill aside {
    opacity: .8;
    position: absolute;
    right: 0;
    top: 0;
}

.skill .bar {
    position: relative;
}

.skill .bar .bar-active, .skill .bar .bar-background {
    height: .125rem;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
}

.skill .bar .bar-background {
    opacity: .2;
    width: 100%;
}

/* -- Social Icons */

.social-icons a {
    color: #000;
    padding: .3125rem;
    display: inline-block;
}

/* -- Work */

.work {
    display: block;
    position: relative;
    margin-bottom: 1.875rem;
}

.work .description {
    position: absolute;
    bottom: .625rem;
    z-index: 2;
    left: .625rem;
}

.work .description h4 {
    font-size: 1.125rem;
    font-weight: bold;
    margin-bottom: .125rem;
    margin-top: 0;
    background-color: #fff;
    padding: .125rem;
    display: inline-block;
}

.work .description h5 {
    font-size: .875rem;
    margin-bottom: 0;
    margin-top: 0;
    background-color: #fff;
    padding: .125rem;
}

.work .image {
    position: relative;
    height: 13.75rem;
    z-index: 1;
}

@media screen and (min-width: 48rem) {
    .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
}

/* -- Feature Cards (for About Us Modal) */

.feature-card {
    background-color: #fff; /* White background */
    padding: 25px 20px;      /* Padding inside */
    margin-bottom: 30px;    /* Space below card */
    border-radius: 8px;     /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* Subtle shadow */
    text-align: center;     /* Center content */
    height: 100%;           /* Ensure cards in a row have same height */
    display: flex;          /* Use flexbox for alignment */
    flex-direction: column; /* Stack content vertically */
    justify-content: flex-start; /* Align content to top */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add hover effect */
}

.feature-card:hover {
    transform: translateY(-5px); /* Lift card slightly */
    box-shadow: 0 8px 16px rgba(0,0,0,0.12); /* Increase shadow */
}

.feature-card h4 {
    margin-top: 0;          /* Remove default top margin */
    margin-bottom: 15px;    /* Space below heading */
    font-size: 1.1rem;      /* Adjust heading size */
    font-weight: bold;
    color: #333;           /* Darker heading color */
    flex-grow: 0;           /* Prevent heading from growing */
}

.feature-card h4 i {
    display: block;         /* Icon on its own line */
    font-size: 2.2rem;      /* Make icon larger */
    margin-bottom: 15px;    /* Space below icon */
    color: #61dfff;         /* Use a theme color (adjust if needed) */
}

.feature-card p {
    font-size: 0.9rem;      /* Slightly smaller text */
    opacity: 0.7;           /* Standard opacity for text */
    margin-bottom: 0;       /* Remove default bottom margin */
    line-height: 1.5;       /* Improve readability */
    flex-grow: 1;           /* Allow paragraph to take remaining space */
}

/* Responsive adjustments */
@media (max-width: 991px) { /* Target tablets */
     .feature-cards .col-sm-6:nth-last-child(-n+2) .feature-card {
         /* Remove bottom margin for last 2 items in a row when stacking to 2 */
         /* margin-bottom: 0; */ /* Keep margin for spacing between rows */
     }
}

@media (max-width: 767px) { /* Target phones */
     .feature-cards .col-md-3 .feature-card {
         height: auto; /* Reset height for stacking */
         margin-bottom: 25px; /* Adjust margin for mobile stack */
     }
     .feature-cards .row:last-child .col-md-3:last-child .feature-card {
         margin-bottom: 0; /* Remove margin from very last card */
     }
}

/* --- End Feature Cards --- */

/* -- Benchmark Flex Container -- */
.benchmark-flex-container {
    display: flex;
    flex-wrap: wrap;
    /* Optional: Add negative margins if parent .row has padding */
    /* margin-left: -15px; */
    /* margin-right: -15px; */
}

/* Ensure cards within flex container still have padding */
.benchmark-flex-container > [class*='col-'] {
     /* Optional: Adjust padding if needed, Bootstrap usually handles this */
    /* padding-left: 15px; */
    /* padding-right: 15px; */
    display: flex; /* Make column a flex item to stretch card */
    align-items: stretch; /* Ensure columns stretch to match */
}

/* Ensure feature card stretches within its column */
.benchmark-flex-container .feature-card {
    width: 100%; /* Make card fill its flex column */
    display: flex; /* Use flex internally again if needed */
    flex-direction: column;
    justify-content: center; /* Center icon/title vertically */
}