/* Your custom styles below */

#headerColor {
    width:100%;
    margin:0;
}

#headerColor, #headerColor .navbar {
   /* background-color: transparent !important; */
   background: black !important; 
    
}

.navbar-toggler {
    background-color: white; 
} 

.nav-link, .menu-item a {
    color:white;
    text-decoration: none;
     text-transform: uppercase;
}

a.nav-link:hover, .menu-item a:hover {
    color:rgb(209, 36, 243);
}


a.nav-link.active, .current-menu-item a {
    color:#c333fc !important;
   
}

a.nav-link.active:hover, .current-menu-item a:hover {
    color:#9e10d6 !important;
}

#navbarNav {
    margin-top: 15px;
}

#navbarNav li, .menu-item {
    font-size: 16px;
    padding-bottom: 15px;
}


.menu-item-has-children {
    position: relative;
    z-index: 1;
}

.menu-item-has-children::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
    color: white;
}


.dropdown-menu, .sub-menu {
    left: 40px;
    position: relative;
    background: #000000;
    list-style: none;
    width: 250px;
    padding: 15px 0;
    display: none;
   /* transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s; */ /* Smooth transition for all properties */
  
}


.menu-item-has-children:hover .sub-menu {

    display: block;

}

.dropdown-menu .nav-item, .sub-menu .menu-item {
    border-bottom: solid gray 2px;
    padding: 15px 0;
}

.dropdown-menu .nav-item a:hover, .sub-menu .menu-item a:hover {
    background: white;
}

.dropdown-item {
    padding:8px;
}

.dropdown-menu .nav-item a.active, .sub-menu .current-menu-item a {
    background: #202225;
}



/* === Hero, hero image ===*/

.hero-img-tablet, .hero-img-desktop, .hero-img-large {
    display: none;
}



.hero-container,
.hero-container img,
.text-hero {
    display: none;
}


.hero-container-for-style-and-style3-992px {
    width:100%;
    max-width: 100% !important;
    position: relative; 
    background: #000;
    padding:0px;
    margin:0 auto;
}

.text-hero-for-style-and-style3 {
    width: 100%;
    min-height: 100%;
    top:0;
    position:absolute;
    text-align: left;
    padding:0;
    color:white;
    background-image: linear-gradient(100deg, rgba(0, 0, 0, 1) 15%, rgba(22, 24, 32, 0.6) 60%, rgba(15, 16, 20, 0.87) 75%, rgba(0, 0, 0, 1) 100%) !important;
}

.text-hero-for-style-and-style3 h1 {
    color:white !important;
    font-weight: bold;
    width: 55%;
    font-size: 26px;;
    margin:0;
    padding:15% 0 10px 30px;
    line-height: 1.2;
}

.text-hero-for-style-and-style3 h2 {
    width: 55%;
    padding:0 0 0px 30px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
}

.text-hero-for-style-and-style3 .line-divider {
    position:relative;
    left: 30px;
    width: 130px;
    margin-bottom: 10px;
    border-bottom: #9f11d7 2px solid;
}


.first-button-container {
    padding: 25px;
    background-color: black;
   /* position:absolute; */
    top:500px;
    width:100%;
    margin:0;
    z-index:6;
}

.second-button-container {
    background-color:black;
    padding:40px 20px;

}

.first-button-container h3,
.second-button-container h3 {
    color: #be0be5;
    padding-bottom: 20px;
}


.cta-btn a p {
    color:white;
    padding: 10px;
    font-size: 26px;
    border: 2px solid rgb(208, 188, 188);
    width: 270px;
    margin: auto;
    background-color: #8a05bf;
    border-radius: 50px;
    box-shadow: 2px 2px 10px rgb(157, 145, 145);
}

.cta-btn a p:hover {

    background-color: rgb(156, 20, 198);
}

.cta-btn a {
    text-decoration: none; 
}


.section-1, .section-2, .section-3, .section-4, .section-5 {
    background-color: #131415 !important;
    color:rgb(238, 234, 234);
}

.section-1 a, .section-2 a, .section-3 a, .section-4 a, .section-5 a {
    color:#cf3def;
}


.section-5 {
    background-color: black !important;
}

.nearme {
    background-color: #131415 !important;
    color:rgb(238, 234, 234);
    border-top: 3px solid #000;
}


.about-video-section {
    width: 80%;
    padding: 30px 10px;
}

.section-padding {
    padding-top:60px;
    padding-bottom:60px;
    padding-left:30px;
    padding-right:30px;
}


.section-padding h2 {
    padding-bottom:20px;
    font-size: 28px;
    line-height: 1.5;

}

.section-padding h3 {
    font-size: 22px;
    padding-bottom:20px;
    line-height: 1.5;

}

.section-padding p, .ul-second-section li {
    font-size: 19px;
    line-height: 1.6;

}

.section-padding p:last-child {
    margin-bottom: 0;

}

.text-two-images-section .col-lg-10 h2 {
    padding-top: 60px;
}

.img-1-div, .img-2-div {
    position: relative;
    z-index: 4;
    padding:15px !important;
    
    
}

.img-1-div img, .img-2-div  img {
    border: 2px solid black;
}


.row-first-section-2-img, .row-second-section-2-img {
    position: relative;
    overflow: hidden;
    z-index: 20;
    padding:0px;
    box-shadow: 4px 4px 10px rgb(177, 27, 218);
}

.row-first-section-2-img::before, .row-second-section-2-img::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2; /* sits above the images */
    pointer-events: none;
  
    /* Linear dark overlay: black -> transparent -> dark gray */
    background-image: linear-gradient(100deg, rgba(0, 0, 0, 0.96) 5%, rgba(0, 0, 0, 0.85) 10%, rgba(22, 24, 32, 0.3) 60%, rgba(15, 16, 20, 0.85) 75%, rgba(0, 0, 0, 0.88) 90%, rgba(0,0,0,1) 100%) !important;
}

  .row-first-section-2-img .img-1-div,
  .row-first-section-2-img .img-2-div,
  .row-second-section-2-img .img-1-div,
  .row-second-section-2-img .img-2-div {
    position: relative;
    z-index: 1;
  }


.google-map iframe {
    width: 100%;
    
}

.btn-container-2 {
    padding-top:50px;
    padding-bottom:50px;
}

.div-text-padding-bottom, .image-padding-bottom {
    padding-bottom:60px;
}

.section-padding a {
    text-decoration: none;
}

.nap-map-section{
    background: #080808;
    color:white;
}

.nap p{
    font-size: 20px;
    padding-bottom:10px;
}

a svg {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    transition: fill 0.3s ease;
}
  
a:hover svg {
    fill: #0d6efd; /* Change to brand color or theme */
}
  

footer a {
    text-decoration: none;
    font-size: 18px;
    color:darkblue;
}


/* Form container */
.form-container {
    overflow: hidden;
    width: 100%;
    background-color: #131415 !important;
    padding-top: 50px;
    padding-bottom: 50px;
}


.form-container div {
    width: 90%;
    margin: auto;
    border-radius: 16px;
}


/* Form styles */
.contact-form {
    padding: 50px;
    padding-bottom:60px;
    max-width: 700px;
    margin: auto;
}

.contact-form h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 8px;
    text-align: center;
    padding: 30px 25px;
}

.form-subtitle {
    color: #718096;
    text-align: center;
    margin-bottom: 32px;
    font-size: 0.95rem;
}

/* Form groups */
.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #4a5568;
    font-size: 0.9rem;
}

/* Input and textarea styles */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 0;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    font-size: 1rem;
    font-family: inherit;
    background-color: transparent;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom-color: #667eea;
    box-shadow: 0 2px 0 0 green;
    transform: translateY(-2px);
}

.form-group input:hover,
.form-group textarea:hover {
    border-bottom-color: #cbd5e0;
}

/* Textarea specific */
.form-group textarea {
    height: 80px;
    min-height: 80px;
    resize: vertical;
    margin-bottom: 20px;
}

/* Submit button */
.submit-btn {
    width: 100%;
    background: green;
    color: white;
    border: none;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.submit-btn:hover::before {
    left: 100%;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.submit-btn:active {
    transform: translateY(0);
}

.btn-text {
    position: relative;
    z-index: 1;
}

.btn-icon {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.submit-btn:hover .btn-icon {
    transform: translateX(4px);
}


/* Focus styles for accessibility */
.submit-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.4);
}

/* Form validation styles */
.form-group input:invalid:not(:focus):not(:placeholder-shown),
.form-group textarea:invalid:not(:focus):not(:placeholder-shown) {
    border-bottom-color: #082d5b;
    /* box-shadow: 0 2px 0 0 rgba(198, 191, 191, 0.2); */
}

.form-group input:valid:not(:focus):not(:placeholder-shown),
.form-group textarea:valid:not(:focus):not(:placeholder-shown) {
    border-bottom-color: red;
}

/* Loading state for button */
.submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.submit-btn:disabled:hover {
    transform: none;
    box-shadow: none;
}



/* 400px */
@media (min-width: 400px) {

    .text-hero-for-style-and-style3 h1,
    .text-hero-for-style-and-style3 h2 {
       
       padding-left: 10%;
        
    }

    .text-hero-for-style-and-style3 .line-divider {
        left: 10%;
    }

    
}


  /* 550px */
@media (min-width: 550px) {

    .text-hero-for-style-and-style3 h1 {
        padding-top: 15%;
        font-size: 2rem;
        width: 60%;
    }

    .text-hero-for-style-and-style3 h2 {
        font-size: 1.75rem;
        width: 60%;
    }
    
}


/* 601 */
@media (min-width: 601px) {

    .hero-img-mobile{
        display: none;
    }

    .hero-img-tablet{
        display: block;
    }

    .text-hero-for-style-and-style3 h1 {
        padding-top: 20%;
       
    }

 
    .text-hero-for-style-and-style3 .line-divider {
        width: 200px;
    }
    
  }


/* 720 */
@media (min-width: 720px) {

    .hero-img-tablet {
        display: none;
    }

    .hero-img-desktop {
        display:block;
    }

    .btn-container{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
}

/* 766 */
@media (min-width: 766px) {

    .text-hero-for-style-and-style3 h1 {
        font-size: 2.5rem;
    }

    .text-hero-for-style-and-style3 h2 {
        font-size: 2rem;
    }
    

    .img-1-div {
        margin-bottom: auto;
    }

    .about-video-section {
        width: 60%;
        padding: 15px;
    }

    .form-container div {
        width: 60%;
    }
    

}


/* Hover-to-open dropdowns on desktop */
@media (min-width: 992px) { /* matches .navbar-expand-lg breakpoint */

    .menu-item-has-children:hover .sub-menu {
      position: absolute;
    }

    #navbarNav {
      margin-top: 0;
    }
    
     #navbarNav li {
         margin-left: 15px;
         margin-right: 15px;
     }
    .navbar .dropdown:hover > .dropdown-menu {
      display: block;
    }
    /* Keep tight alignment under the trigger */
    .navbar .dropdown-menu {
      margin-top: 0;
    }
    /* Optional: show active state on the trigger while hovering */
    .navbar .dropdown:hover > .nav-link {
      color:rgb(140, 21, 196);
    }
}
  


    /* 1250 */
@media (min-width: 1250px) {

    .nav-item.dropdown .dropdown-menu, .sub-menu {
        left: -50px !important;
    }

    .dropdown .dropdown-menu li, .sub-menu .menu-item  {
        width: 200px;
    }

    .dropdown .dropdown-menu li a, .sub-menu .menu-item a {
        white-space: normal;
    }

    .hero-img-desktop {
        display: none;
    }

    .hero-img-large {
        display: block;
        min-width: 100%;
        max-width: 100%;
    }


    .text-hero-for-style-and-style3 h1 {
        width: 60%;
        padding-top: 12%;
        font-size: 3.5rem;
    }

    .text-hero-for-style-and-style3 h2 {
        width: 60%;
        font-size: 3rem;
    }

    .text-hero-for-style-and-style3 .line-divider {
        width: 20%;
    }

    .first-button-container {
        background: transparent;
        position:absolute; 
        top:550px;
        z-index:5; 
    }

    .cta-btn a p {
        padding:20px;
    }

}