/* ==========================================================================
   1. Imports and Base Styles
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

   @keyframes gradient {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }
   
   body {
       font-family: "PT Sans", sans-serif;
       color: rgba(237,250,246, 1);
       background: linear-gradient(-45deg, #e7f9f2,#bdebff,#caf3e5,#d2e6dc,#d9f4f9,#dff2ec,#d3f1df);
       background-size: 400% 400%;
       animation: gradient 15s ease infinite;
       height: 100vh;
       margin: 0;
       text-align: center;
       overflow: hidden;
   }
   
   /* ==========================================================================
      2. Layout (Flexbox & Positioning)
      ========================================================================== */
   
   /* FLEX CONTAINER for Left Text and Right Video (Desktop Default) */
   .flex-body {
       display: flex; 
       height: 100vh; 
       align-items: center; 
       justify-content: space-between;
       text-align: initial;
       padding: 0;
   }
   
   .lander_text {
     position: relative;
     z-index: 5;
     text-align: left;
     max-width: 600px;
     margin-left: 5%; 
     padding-right: 20px;
     flex-shrink: 0;
   }
   
   .bg-video {
     position: relative;
     height: 100%;
     width: 50%; 
     flex-grow: 1; 
     margin-right: 5%; 
     overflow: hidden;
   }
   
   .bg-video video {
     position: absolute;
     top: 0; 
     left: 0; 
     min-width: 100%;
     min-height: 100%;
     width: 100%; 
     height: 100%; 
     object-fit: cover; 
     z-index: -999;
    
     -ms-transform: none; 
     -moz-transform: none;
     -webkit-transform: none;
     transform: none;
   }
   
   /* MASKING STYLES (Applies to the video tag) */
   .mask-img {
       display: block;
       max-width: 100%;
       height: auto;
       margin: 0 auto;
   }
   
   .mask {
       mask-image:url('/img/logo.svg');
       -webkit-mask-image: url('/img/logo.svg');
       mask-repeat: no-repeat;
       -webkit-mask-repeat: no-repeat;
       mask-mode: alpha;
       -webkit-mask-mode: alpha;
       background-image: url('/img/bg-gradient.png');
   
       /* Desktop Sizing and Positioning */
       mask-size: 40vw; 
       -webkit-mask-size: 40vw;
       mask-position: right center; 
       -webkit-mask-position: right center;
   }
   
   
   /* ==========================================================================
      3. Typography and Components
      ========================================================================== */
   
   h1  {
       font-family: "PT Sans", sans-serif;
       font-size: 3rem;
       color: #184222;
       letter-spacing: 0px;
       line-height:3.8rem;
   }
   
   p {
       font-family: "PT Sans", sans-serif;
       font-size: 2rem;
       color: #0b1d0f;
       letter-spacing: 0px;
       line-height: 3rem;
   }
   
   .logo {
       max-width: 500px;
       margin: 20px 0 30px 0; 
   }
   
   .logo img {
       max-width: 100%;
   }
   
   .title_main span {
       color: #0a4830;
       background-image: linear-gradient(90deg, #006d43 30%, #01b1f0 90%);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       display: inline-block;
   }
   
   /* Grouping the contact text and button */
.contact-group {
    display: flex;
    flex-direction: column; /* Stack text and button vertically */
    align-items: flex-start; /* Default: Align left with the lander_text content */
    margin-top: 30px; /* Space above the group */
}

/* Style the contact paragraph inside the group */
.contact-group .contact-text {
    /* Reduce size slightly to differentiate from main paragraphs */
    font-size: 1.5rem; 
    line-height: 2rem;
    margin-bottom: 15px; /* Space between text and button */
}

.contact-group .contact-link {
    /* Container for the button */
    display: block;
    width: 100%; 
    max-width: 250px; /* Desktop max-width constraint for the button */
    margin: 0;
}


/* Updated .btn-primary (Responsive Sizing) */
.btn-primary {
    width: 100%; /* Inherit width from parent link (max-width: 250px) */
    max-width: 100%;
    /* OLD: font-size: 1.5rem; -> Too large */
    font-size: 1.25rem; 
    font-weight: 600;
    color: #fff;
    background-image: linear-gradient(
        to right,
        #0ba360,
        #3cba92,
        #30dd8a,
        #2bb673
      );
      box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);
    cursor: pointer;
    /* OLD: margin: 20px; -> Now 0, let the parent group control spacing */
    margin: 0; 
    height: 55px;
    text-align:center;
    border: none;
    background-size: 300% 100%;
    border-radius: 50px;
    transition: all .4s ease-in-out;
}

.btn-primary:hover {
    background-position: 100% 0;
    transition: all .4s ease-in-out;
}
  
.btn-primary:focus {
    outline: none;
}
     
   /* ==========================================================================
      4. Utilities
      ========================================================================== */
   
   .disable-selection {
        -moz-user-select: none;
         -ms-user-select: none;
      -khtml-user-select: none;
     -webkit-user-select: none;
     -webkit-touch-callout: none;
   }
   
/* ==========================================================================
   5. Media Queries (Responsiveness)
   ========================================================================== */

/* Mobile devices (up to 767px) */
@media only screen and (max-width: 767px) {
    
    /* 1. LAYOUT RESET: Disable Flex on the body, allow content stacking */
    .flex-body {
        display: block; 
        height: auto;
        min-height: auto;
    }
    
    body {
        overflow-y: auto; /* Allow scrolling if content is long */
    }

    /* 2. VIDEO: Full-Screen Fixed Background with Opacity */
    .bg-video {
        position: fixed; 
        top: 0;
        left: 0;
        height: 88vh; 
        width: 100vw; 
        margin: 0;
        z-index: 1; 
        opacity: 0.3; /* Keep the subtle, dimmed background */
    }

    .bg-video video {
        min-width: 100%;
        min-height: 100%;
        width: 100%;
        height: 100%;
    }

    /* 3. MASK: Centered and scaled to the full viewport */
    .mask {
        mask-size: 99vw; 
        -webkit-mask-size: 99vw;
        mask-position: center; 
        -webkit-mask-position: center;
    }

    /* 4. TEXT CONTAINER: Remove background, center, and position */
    .lander_text {
        text-align: center;
        max-width: 90%;
        margin: 0 auto;
        padding: 30px 20px 50px 20px;
        position: relative;
        z-index: 10;     
        background-color: transparent; 
        border-radius: 0;
        box-shadow: none;
        min-height: 50vh; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    /* Override contact group alignment to center for mobile */
    .contact-group {
        align-items: center; 
        margin-top: 30px;
    }
    
    .contact-group .contact-link {
        /* On mobile, widen the button for tap target ease */
        max-width: 80vw; 
    }
    
    /* 5. Typography Adjustment & TEXT SHADOW for Readability */
    h1, p {
        color: #0b1d0f;
text-shadow: -1px 1px 8px rgba(0,27,27,0.1);
    }

    h1 {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .title_main span {
        background-image: linear-gradient(90deg, #00663f 0%, #00acff 100%);
        text-shadow: -1px 1px 8px rgba(0,27,27,0.3);
    }
    
    p {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.8rem;
    }
    
    
    .logo {
        max-width: 95%;
        margin-bottom: 15px;
    }
}
   /* Tablet devices (768px to 1024px) - Tighter side-by-side spacing */
   @media only screen and (min-width: 768px) and (max-width: 1250px) {
    .lander_text {
        color: #184222;
        margin-left: 3%;
        max-width: 50%;
    }
    
    .bg-video {
        width: 40%;
        margin-right: 3%;
    }
    
    .mask {
        mask-size: 40vw;
        -webkit-mask-size: 40vw;
    }

    h1 {
        font-size: 2.5rem;
        line-height: 3rem;
    }

    p {
        font-size: 1.5rem;
        line-height: 1.8rem;
        font-weight: 700;
    }
    
    .logo {
        max-width: 250px;
        margin-bottom: 30px;
    }
}