/*        -- Home Page -- Main Section --     -- Home Page -- Main Section --     -- Home Page -- Main Section --     */


/*      -- Main Section --      */
.home-page-main-section {
    display: flex; justify-content: center; align-items: center; height: 400px; position: relative; background-image: url('/assets/images/studying-online.jpg'); background-size: cover; background-position: center; text-align: center; color: var(--white-text);
}
.home-page-main-section::before {
    content: ''; width: 100%; height: 100%; position: absolute; background: var(--home-hero-section-background);
}
@media (max-width:1023px) {
    .home-page-main-section {
        height: 350px;
    }
}
/*      -- Main Section --      */


/*      -- Main Section content --      */
.home-page-main-section-content {
    z-index: 1;
}
.home-page-main-section-content h2 {
    font-size: 25px; font-weight: 500; color: whitesmoke; padding-bottom: 18px;
}
.home-page-main-section h1 {
    font-size: 55px; font-weight: 700; color: whitesmoke; border-right: 3px solid dimgray;
	height: 75px; /* Fixed height to prevent layout shift */
    transition: opacity 2s ease-in-out; display: inline-block; /* Ensure it takes up space */
}

@media (max-width: 1023px) {
    .home-page-main-section-content h2 {
        font-size: 18px;
    }
    .home-page-main-section h1 {
        font-size: 28px; height: 40px;
    }
}
/*      -- Main Section content --      */


/*      -- Resister Now --      */
.register-section {
    padding-top: 28px;
}
.register-now {
	color: var(--white-text); font-size: 18px; font-weight: 500; padding: 12px 35px 8px;
    background: var(--details-bg); border-radius: 12px;
}
.register-now:hover {
    background: var(--btn-bg);
}
@media (max-width: 1023px) {
    .register-now {
        font-size: 15px; padding: 8px 25px 5px;
    }
}
/*      -- Resister Now --      */



/*        -- Home Page -- Main Section --     -- Home Page -- Main Section --     -- Home Page -- Main Section --     */






























.app-install {
  color: var(--white-text); background: var(--btn-bg); padding: 25px 0; margin: 80px 15px;
  border-radius: 12px; box-shadow: var(--shadow); max-width: 915px;
}
@media (min-width: 1024px) {
	.app-install {
		margin: 80px auto;
	}
}

.app-install .container {
  display: flex; align-items: center; flex-direction: column; gap: 10px;
}

#install-btn {
  background: white;
  color: dimgray;
  padding: 0.75rem 1.5rem;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.2s ease;
}

#install-btn:hover,
#install-btn:focus {
  background-color: #f1f1f1;
  outline: 2px solid #fff;
}
#install-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #ddd;
  color: #555;
}




























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










/*         -- Themes --         -- Themes --         -- Themes --         -- Themes --         -- Themes --         */
/*         -- Themes --         -- Themes --         -- Themes --         -- Themes --         -- Themes --         */





/*        -- Light Mode - (Default) --        -- Light Mode - (Default) --        -- Light Mode - (Default) --        */

:root {
    
--home-hero-section-background: linear-gradient(180deg, rgb(50 135 115 / 65%), rgb(0 0 0 / 65%));

}
/*        -- Light Mode - (Default) --        -- Light Mode - (Default) --        -- Light Mode - (Default) --        */





/*    -- Red Theme --    -- Red Theme --    -- Red Theme --    -- Red Theme --    -- Red Theme --    -- Red Theme --    */
[data-theme="red"] {

--home-hero-section-background: linear-gradient(180deg, rgb(135 50 50 / 65%), rgb(0 0 0 / 65%));
    
}
/*    -- Red Theme --    -- Red Theme --    -- Red Theme --    -- Red Theme --    -- Red Theme --    -- Red Theme --    */





/*   -- Blue Theme --   -- Blue Theme --   -- Blue Theme --   -- Blue Theme --   -- Blue Theme --   -- Blue Theme --   */
[data-theme="blue"] {
    
--home-hero-section-background: linear-gradient(180deg, rgb(50 64 135 / 65%), rgb(0 0 0 / 65%));
    
}
/*   -- Blue Theme --   -- Blue Theme --   -- Blue Theme --   -- Blue Theme --   -- Blue Theme --   -- Blue Theme --   */





/*    -- Dark Mode --    -- Dark Mode --    -- Dark Mode --    -- Dark Mode --    -- Dark Mode --    -- Dark Mode --    */
[data-theme="dark"] {
    
--home-hero-section-background: linear-gradient(180deg, rgb(0 33 25 / 65%), rgb(0 0 0 / 65%));
    
}
/*    -- Dark Mode --    -- Dark Mode --    -- Dark Mode --    -- Dark Mode --    -- Dark Mode --    -- Dark Mode --    */




/*         -- Themes --         -- Themes --         -- Themes --         -- Themes --         -- Themes --         */
/*         -- Themes --         -- Themes --         -- Themes --         -- Themes --         -- Themes --         */










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