/*  ==========================================================================
    Table of Contets
    ==========================================================================
    
    1.0 Common Styles
    2.0 Header Section
    3.0 Hero Section
    4.0 About Section
    5.0 Feature Section
    6.0 Video Section
    7.0 Screenshot Section
    8.0 Pricing Section
    9.0 Counter Section
    10.0 Testimonial Section
    11.0 Blog Section
    12.0 Download Section
    13.0 Subscribe Section
    14.0 Footer Section
    15.0 Scrool To Top
    
    ==========================================================================
    Dean Portfolio Template Version 0.1
    ========================================================================== */

	/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500,600,700|Oswald:400,500,600,700'); */
    @import url(https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap);
	
/*  ==========================================================================
    Common Styles
    ========================================================================== */
*{
	padding: 0;
	margin: 0;
}
body{
    background-color: #050505;
    font-family: 'JetBrains Mono', sans-serif;
    font-size: 15px;
    line-height: 23px;
    color: #777;
    font-weight: 400;
    position: relative;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Fira Code', sans-serif;
    -webkit-font-smoothing:antialiased;
	color: #333;
}
h1{
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 10px;
    color: #fff;
    letter-spacing: -0.05em;
}
h2{
    font-size: 32px;
    color: #fff;
    margin: 0 0 10px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -0.04em;
}
h3,h4{
    margin: 0 0 10px;
    font-weight: 600;
    line-height: 1.7;
    color: #fff;
    letter-spacing: -0.01em;
}
h3{
    font-size: 18px;
}
h4{
    font-size: 16px;
}
h5,h6{
    font-size: 14px;
    margin: 0 0 10px;
}
img{
    border: none;
    outline:none;
    max-width: 100%;
}
ul{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
p, li, a, span{}
p{
    font-size: 15px;
    margin-bottom: 15px;
}
a, a:hover{
    text-decoration: none;
}
a:focus{
    outline: 0;
    text-decoration: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
   color: #ddd !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder{ /* Firefox 18- */
   color: #ddd !important;  
}

input::-moz-placeholder,
textarea::-moz-placeholder{  /* Firefox 19+ */
   color: #ddd !important;  
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder{  
   color: #ddd !important;  
}
button{
    border: none;
	background: none;
}
/* Helper Class */
.padding{
    padding: 100px 0;
}
.no-padding{
    padding: 0;
}
.padding-15{padding: 15px;}
.padding-20{padding: 20px;}

.bg-white{ background-color: #fff; }
.bg-grey{ background-color: #eef3f9;}
.bg-dark{ background-color: #050505!important;}
.bd-top{ border-top: 1px solid #eaeaea;}
.bd-bottom{ border-bottom: 1px solid #eaeaea;}

.mb-10{ margin-bottom: 10px; }
.mb-15{ margin-bottom: 15px; }
.mb-20{ margin-bottom: 20px; }
.mb-25{ margin-bottom: 25px; }
.mb-30{ margin-bottom: 30px; }
.mb-35{ margin-bottom: 35px; }
.mb-40{ margin-bottom: 40px; }
.mb-45{ margin-bottom: 45px; }
.mb-50{ margin-bottom: 50px; }
.ml-15{ margin-left: 15px; }
.ml-20{ margin-left: 20px; }
.ml-25{ margin-left: 25px; }
.ml-30{ margin-left: 30px; }
.ml-35{ margin-left: 35px; }
.fz-28{ font-size: 28px; }
.fz-24{ font-size: 24px; }
.fz-22{ font-size: 22px; }
.fz-20{ font-size: 20px; }
.fz-18{ font-size: 18px; }
.fz-16{ font-size: 16px; }
.pd-15{ padding: 15px; }
.pdl-80{ padding-left: 80px; }
.text-black{
    color: #333;
}
.text-white{
    color: #ffffff;
}
.align-left{
    text-align: left;
}
.align-right{
    text-align: right;
}
.align-center{
    text-align: center;
}
.fl-right{
    float: right;
}
.fl-left{
    float: left;
}

.overlay{
    width: 100%;
    position: relative;
    z-index: 1;
}
.overlay:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

/* Preloader Styles */
.loaded .site-preloader-wrap {
    opacity: 0;
    visibility: hidden;
}
.site-preloader-wrap {
    position: fixed;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background: #111;
    top: 0;left: 0
}

.site-preloader-wrap .spinner {
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
}

.spinner {
  width: 40px;
  height: 40px;

  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

/* Button Style */
.btn_group{}
.btn_group a{
    margin: 5px;
}
.default-btn{
    font-family: "JetBrains Mono",sans-serif;
    letter-spacing: 2px;
    background-color: #ff4c4c;
    color: #ddd;
    line-height: 45px;
    display: inline-block;
    padding: 0 25px;
    border-radius: 0;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    z-index: 1;
    -webkit-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     -o-transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.default-btn:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    -webkit-transform-origin: right center;
       -moz-transform-origin: right center;
        -ms-transform-origin: right center;
            transform-origin: right center;
    -webkit-transform: scale(0, 1);
       -moz-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
         -o-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
         -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}
.default-btn:hover{
    color: #111;
}
.default-btn:hover:before{
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
        transform-origin: left center;
    -webkit-transform: scale(1, 1);
       -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
         -o-transform: scale(1, 1);
            transform: scale(1, 1);
}
.default-btn.btn_sm{
    line-height: 40px;
    padding: 0 15px;
}

/* Transition Effect */
a,a:hover, .overlay, img, .form-control,  .form-control:hover, button{
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
/* ==========================================================================
   Header Section
   ========================================================================== */
.header-section{
    background-color: transparent;
    width: 100%;
    height: 80px;
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    padding: 10px 0;
}
.navbar-fixed-top.header-section{
    background-color: #111;
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.05);
    height: 70px;
    border-bottom: 0;
    padding: 0;
}
.mainmenu .download-btn{
    background-color: #ef5560;
    box-shadow: 0 10px 35px 2px rgba(239, 85, 96, 0.8);
    border-radius: 30px;
    display: inline-block;
    padding: 10px 20px;
    text-transform: uppercase;
    font-size: 10px;
    color: #fff;
    font-weight: 600;
    line-height: 25px;
    margin: 14px 0;
}
.navbar-fixed-top .mainmenu .download-btn{
    background-color: #23262e;
    color: #fff;
}
.mainmenu .download-btn:hover{
    border-radius: 0;
    box-shadow: none;
}
.navbar-fixed-top ul.nav > li > a{
    color: #ddd;
}
.navbar-fixed-top ul.nav > li > a:hover,
.navbar-fixed-top ul.nav > li > a:focus,
.navbar-fixed-top ul.nav > li.active > a{
    color: #fff;
}
.logo-light,
.navbar-fixed-top .logo-light,
.logo-dark,
.navbar-fixed-top .logo-dark,
.navbar-fixed-top.header-section,
.header-section{
    transition: all 0.3s ease-in-out;
}
.navbar{
    border: medium none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    margin: 0;
    position: relative;
    padding: 0;
}
.navbar-header {
    padding: 17px 0;
}
.navbar-header .brand{
    font-size: 25px;
    color: #333;
    font-family: 'JetBrains Mono', sans-serif;
    letter-spacing: -1px;
    font-weight: 600;
	margin-left: 13px;
}
.navbar-header .nav-btn{
    padding: 8px;
    border-radius: 1px;
}
.navbar-header .nav-btn .icon-bar{
    background-color: #fff;
    width: 18px;
}
.navbar-fixed-top .navbar-header .nav-btn .icon-bar{
    background-color: #777;
}
.navbar-header .nav-btn:hover,
.navbar-header .nav-btn:focus{
    opacity: 0.8;
}

/* Nav Menu */
#navbar{
    z-index: 999;
    padding: 0 15px;
}
ul.nav{}
ul.nav > li{}
ul.nav > li > a{
    color: rgba(255, 255, 255, 0.9);
    font-family: 'JetBrains Mono', sans-serif;
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    letter-spacing: 1px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 70px;
    z-index: 1;
}
ul.nav > li > a:hover,
ul.nav > li > a:focus,
ul.nav > li > a.active{
    background: none;
    color: #fff;
    opacity: 1;
}
.menu-btn{
    margin-left: 10px;
    margin-top: 10px;
}

/*Mobile Menu */
.menu-wrap{
    position: relative;
}
.slicknav_menu {
    background: none;
    padding: 4px 0;
    display:none;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
.slicknav_nav {
    background-color: #fff;
}
.slicknav_btn{
    background-color: transparent;
    margin: 17px 5px 19px;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav .slicknav_row, 
.slicknav_nav a,
.slicknav_nav a:hover{
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.slicknav_nav .slicknav_row, 
.slicknav_nav a {
    padding: 10px 15px;
    margin: 0;
    color: #777;
}
.slicknav_nav a .caret{
    display: none;
}
.slicknav_nav ul{
    margin: 0;
}
.slicknav_nav ul li a{
    padding-left: 30px;
    font-size: 12px;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover{
    background-color: transparent;
    color: #333;
}

/* Make nav + CTA sit on one line */
.menu-wrap{
  display: flex;
  align-items: center;
}

/* Push CTA to the far right */
.header-cta{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 16px;
}

/* Ghost style for CV */
.download-btn--ghost{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.25);
}

/* Slightly smaller buttons so they fit cleanly in the header */
.mainmenu .download-btn{
  margin: 0;              /* removes the template margin */
  padding: 8px 14px;      /* was 10px 20px */
  line-height: 22px;      /* keeps height tidy */
}

/* Hide CTA on mobile (let burger menu handle it) */
@media (max-width: 991px){
  .header-cta{ display: none; }
}


/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section{
    background-image: url(../img/hero-background.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
}
.hero-content h1{
    font-size: 72px;
    text-transform: uppercase;
}
.hero-content h5{
    color: #ddd;
    text-transform: uppercase;
}
.hero-content p{
    color: #ddd;
    margin-bottom: 22px;
}
.social-link{}
.social-link li{
    display: inline-block;
    margin: 0 10px;
}
.social-link li a{
    display: inline-block;
    color: #bbb;
    font-size: 18px;
}
.social-link li a:hover{
    color: #fff;
}
/*Down Arrow CSS*/

.down-arrow {
    position: absolute;
    left: calc(50% - 25px);
    bottom: 22px;
}

.scroll-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Existing arrow animation + glow */
.arrow-animated {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    writing-mode: vertical-rl;
    text-align: center;
    line-height: 40px;
    animation: bounce 2s infinite, pulseGlow 2s ease-in-out infinite;
    text-shadow:
        0 0 8px #00c8ff,
        0 0 16px #00c8ff,
        0 0 24px #00c8ff;
}

.arrow-animated:hover {
    color: #fff;
    text-shadow:
        0 0 12px #e6f7ff,
        0 0 24px #e6f7ff,
        0 0 36px #e6f7ff;
}

.hero-tech {
    padding-top: 8px;
}

/* Glowing Streaks */
.streak {
    width: 2px;
    height: 30px;
    background: rgba(0, 200, 255, 0.4);
    animation: streakPulse 2s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(0, 200, 255, 0.3);
}

@keyframes pulseGlow {

    0%,
    100% {
        text-shadow:
            0 0 8px rgba(0, 200, 255, 0.3),
            0 0 12px rgba(0, 200, 255, 0.2),
            0 0 18px rgba(0, 200, 255, 0.15);
    }

    50% {
        text-shadow:
            0 0 12px rgba(0, 200, 255, 0.7),
            0 0 20px rgba(0, 200, 255, 0.5),
            0 0 30px rgba(0, 200, 255, 0.3);
    }
}

@keyframes streakPulse {

    0%,
    100% {
        opacity: 0.3;
        box-shadow: 0 0 6px rgba(0, 200, 255, 0.3);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 12px rgba(0, 200, 255, 0.6);
    }
}

/* Down Arrow Animation */
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-20px);}
    60% {-webkit-transform: translateY(-10px);}
}
 
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
    40% {-moz-transform: translateY(-20px);}
    60% {-moz-transform: translateY(-10px);}
}
 
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
    40% {-o-transform: translateY(-20px);}
    60% {-o-transform: translateY(-10px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
}

.hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    margin-bottom: 12px;
}

.default-btn.btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ddd;
}

.default-btn.btn-secondary:hover {
    color: #111;
    border-color: rgba(255, 255, 255, 0.55);
}
/* ==========================================================================
   About Section
   ========================================================================== */
.about-section{}
.about-wrap{
    /* display: flex; */
    align-items: flex-start;
}
.about-content{
    padding-right: 40px;
}
.about-content .default-btn{
    margin-top: 20px;
}
.about-content p{
    color: #bbb;
}

.about-section .col-md-6.d-none.d-md-block {
    display: flex !important;
    align-items: flex-start;
    /* was center */
    justify-content: center;
    padding-top: 20px;
    /* optional to match text block spacing */
}

.about-photo {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    /* border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
    border-radius: 6px; */
}
/* ==========================================================================
   Service Section
   ========================================================================== */
   .service-section {
       /* Gradient background to match hero */
       background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
       width: 100%;
       padding: 60px 0;
       /* give some vertical breathing room */
   }

   .service-section .section-heading p {
       color: #ddd;
   }

   /* Reset margin gutters for a tight grid */
   .service-wrap {
       margin: 0 -15px;
   }

   /* Frosted-glass cards */
   .service-section .service-content {
       background-color: rgba(255, 255, 255, 0.05);
       backdrop-filter: blur(8px);
       border-radius: 8px;
       text-align: center;
       padding: 30px 20px;
       transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
   }

   /* Hover “pop-out” effect */
   .service-section .service-content:hover {
       background-color: rgba(255, 255, 255, 0.08);
       transform: translateY(-6px);
       box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
   }

   /* Icon style */
   .service-section .service-content i {
       font-size: 40px;
       color: #2c9ab7;
       /* swap with your accent color */
       margin-bottom: 15px;
   }

   /* Card headings */
   .service-section .service-content h3 {
       text-transform: uppercase;
       font-weight: 500;
       letter-spacing: 1px;
       margin: 15px 0 10px;
       font-size: 1.1rem;
       color: #fff;
   }

   /* Card copy */
   .service-section .service-content p {
       color: #ccc;
       font-size: 14px;
       line-height: 1.5;
   }

   /* ensure the section is the positioning context */
   .service-section {
       position: relative;
       overflow: hidden;
   }

   /* position the particle canvas */
   #particles-js-services {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 0;
   }

   /* bring your content above the canvas */
   .service-section .container-fluid {
       position: relative;
       z-index: 1;
   }

   /* 1. Make each col a flex container */
   .service-wrap>.col-lg-4,
   .service-wrap>.col-sm-6 {
       display: flex;
       /* ensures multiple cards wrap nicely on smaller screens */
   }

   /* 2. Stretch the card to fill the column */
   .service-section .service-content {
       flex: 1;
       /* fill available height */
       display: flex;
       /* turn the card itself into a flex container */
       flex-direction: column;
       /* stack icon, title, copy vertically */
       justify-content: space-between;
       /* pushes content apart */
   }

   /* 3. (Optional) add a little padding at the bottom so text never touches the edge */
   .service-section .service-content p {
       margin-bottom: 1rem;
   }

/* ==========================================================================
   Portfolio Section
   ========================================================================== */
.portfolio-section{
    padding-bottom: 0;
}
.portfolio-section .section-heading p{
    color: #ddd;
}
.portfolio-items .col-lg-4{
    padding: 0;
}
.portfolio-wrap{
    display: flex;
    align-items: center;
}
.portfolio-content{}
.portfolio-thumb img{
    width: 100%;
}
.portfolio-thumb{
    position: relative;
}
.portfolio-box .hover{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    
    opacity: 0;
    visibility: hidden;
    padding: 15px;
}
.portfolio-box .hover div{
    background-color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.portfolio-box:hover .hover{
    opacity: 1;
    visibility: visible;
}

/* Websites: View more toggle */
.website-extra[hidden] {
    display: none !important;
}
/* ==========================================================================
   Case Study Section
   ========================================================================== */

.case-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 22px;
    margin-bottom: 16px;
}

.case-card h3 {
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Two independent columns so content doesn't leave blank gaps */
.case-grid {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.case-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.case-grid h4 {
    margin-bottom: 6px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
}

.case-block p {
    color: #bbb;
    margin: 0;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .case-grid {
        flex-direction: column;
    }

    .case-card {
        padding: 18px;
    }
}

/* ==========================================================================
   Skills Section
   ========================================================================== */

.skills-list {
    margin: 0;
    padding-left: 18px;
}

.skills-list li {
    margin-bottom: 10px;
    color: #bbb;
    line-height: 1.7;
}

.skills-section {
    position: relative;
    overflow: hidden;
}

.skills-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.55;
    /* adjust to taste */
}

.skills-section .container {
    position: relative;
    z-index: 1;
    /* keep content above canvas */
}
/* ==========================================================================
   Roles Section
   ========================================================================== */
/* Roles cards: equal height + align Tools to bottom */
.roles-row {
    align-items: stretch;
}

.roles-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.roles-card .tools-block {
    margin-top: auto;
    /* pushes Tools to bottom */
}
/* ==========================================================================
   CTA Section
   ========================================================================== */
.cta-section{}
.cta-section{
    padding: 130px 0;
}
.cta-section .cta-content h2{
    font-size: 40px;
    margin-bottom: 25px;
}

/* ==========================================================================
   Roles Section
   ========================================================================== */
/* Roles cards: equal height + align Tools to bottom */
.roles-row {
    align-items: stretch;
}

.roles-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.roles-card .tools-block {
    margin-top: auto;
    /* pushes Tools to bottom */
}
/* ==========================================================================
   Contact Section
   ========================================================================== */
.contact-section{
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.contact-wrap{
    display: flex;
    align-items: center;
    padding: 120px 0;
}
/*Contact Form*/
.contact-form .form-control{
    border: none;
    border-bottom: 1px solid #333;
    border-radius: 0;
    height: 45px;
    background-color: transparent;
    color: #fff;
}
.form-control:hover,
.form-control:focus{
    box-shadow: none;
}
.contact-form .submit-button:hover{ cursor: pointer; }
.contact-form{
    padding-right: 40px;
}
.contact-form .form-control.message{
    height: 120px;
}
#form-messages{
    display: none;
}
#form-messages.alert-danger,
#form-messages.alert-success{
    display: block;
}
/*Google Map*/
#google-map{
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}
/* ==========================================================================
   Footer Section
   ========================================================================== */
.footer-section{
    background-color: #111;
    display: block;
    color: #fff;
    text-align: center;
    padding: 30px 0;
}
.footer-section p{
    text-transform: uppercase;
    font-size: 12px;
    margin: 0;
}  

/* ==========================================================================
   Scroll To Top
   ========================================================================== */
#scroll-to-top{
    background-color: #fff;
    display: none;
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 14px;
    border-radius: 50%;
    line-height: 45px;
    color: #555;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}
#scroll-to-top:hover{
    background-color: #282828;
    color: #fff;
}

/* ===========================
   HERO: Mobile fixes
   =========================== */

/* 1) Stop forcing 100vh on small screens (it causes collisions) */
@media (max-width: 767px) {
    .hero-section {
        height: auto;
        /* override 100vh */
        min-height: 100vh;
        /* still fills screen if content is short */
        padding: 110px 0 70px;
        /* space for fixed header + bottom breathing room */
    }

    /* 2) Reduce oversized headline on mobile */
    .hero-content h1 {
        font-size: 48px;
        /* was 80px */
        line-height: 1.05;
        margin-bottom: 10px;
    }

    /* 3) Tighten up paragraphs so they don't push into the arrow */
    .hero-content p {
        margin-bottom: 16px;
    }

    /* 4) Make the CTA row stack cleanly */
    .hero-actions {
        flex-direction: column;
        gap: 12px;
        margin-top: 18px;
        margin-bottom: 12px;
    }

    /* Make buttons full-width so they look intentional */
    .hero-actions .default-btn {
        width: 92%;
        max-width: 360px;
        text-align: center;
    }

    /* 5) Links line should wrap, not collide */
    .hero-links {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 10px;
    }

    /* 6) Hide the scroll indicator on mobile (it overlaps content) */
    .down-arrow {
        display: none;
    }
}

 /* Optional: if you want arrow on mobile, do this instead of display:none */
@media (max-width: 767px){
  .down-arrow{
    display:block;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ===========================
   Modal Videos
   =========================== */

.video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.video-modal.is-open {
    display: block;
}

.video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}

.video-modal__dialog {
    position: relative;
    width: min(980px, calc(100% - 28px));
    margin: 6vh auto 0;
    background: #050505;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    overflow: hidden;
}

.video-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 28px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
}

.video-modal__close:hover {
    background: rgba(255, 255, 255, 0.14);
}

.video-modal__frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 */
}

.video-modal__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}