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

   @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=EB+Garamond:wght@400;700&family=Roboto:wght@400;700&display=swap');

   @keyframes gradient {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }

   body {
       font-family: "Roboto", sans-serif;
       color: #0D4444;
       background: linear-gradient(-45deg, #b8e8e8, #c8f2f2, #d5f6f6, #bfecec, #caf0f0, #d0f4f4, #b8e8e8);
       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: "Abril Fatface", serif;
       font-size: 3rem;
       color: #0D4444;
       letter-spacing: 0px;
       line-height: 3.8rem;
   }

   p {
       font-family: "Roboto", sans-serif;
       font-size: 2rem;
       color: #1a5c5c;
       letter-spacing: 0px;
       line-height: 3rem;
   }

   .logo {
       max-width: 320px;
       margin: 20px 0 30px 0;
   }

   .logo img {
       max-width: 100%;
   }

   .title_main span {
       background-image: linear-gradient(90deg, #0D4444 30%, #21C8C9 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;
    align-items: flex-start;
    margin-top: 30px;
}

/* Style the contact paragraph inside the group */
.contact-group .contact-text {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 15px;
}

.contact-group .contact-link {
    display: block;
    width: 100%;
    max-width: 250px;
    margin: 0;
}


/* .btn-primary */
.btn-primary {
    width: 100%;
    max-width: 100%;
    font-size: 1.25rem;
    font-weight: 700;
    color: #101010;
    background-image: linear-gradient(
        to right,
        #21C8C9,
        #49FE03,
        #21C8C9,
        #00A8E7
      );
      box-shadow: 0 4px 15px 0 rgba(33, 200, 201, 0.75);
    cursor: pointer;
    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;
    }

    /* 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;
    }

    .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 */
    .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;
    }

    .contact-group {
        align-items: center;
        margin-top: 30px;
    }

    .contact-group .contact-link {
        max-width: 80vw;
    }

    /* 5. Typography */
    h1, p {
        color: #0D4444;
        text-shadow: -1px 1px 8px rgba(0,0,0,0.08);
    }

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

    .title_main span {
        background-image: linear-gradient(90deg, #0D4444 0%, #21C8C9 100%);
        text-shadow: none;
    }

    p {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.8rem;
    }

    .logo {
        max-width: 95%;
        margin-bottom: 15px;
    }
}

/* Tablet devices (768px to 1250px) */
@media only screen and (min-width: 768px) and (max-width: 1250px) {
    .lander_text {
        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;
    }
}