:root{
        --primary-color: #003366;
        --secondary-color: #ffffff;
        --accent-color: #ffd700;

        --inactive-color: #d8d8d8; 

        --title-text-color: #1D2B38;
        --text-color: #808080;

        --button-hover-color: #011c36;

        --main-title-text-size: 3rem;
        --sub-title-text-size: 2rem;
        --small-title-text-size: 1.5rem;
        --body-text-size: .9rem;
        --captions-text-size: .79rem;

        --regular-border-radius: 5px;
        --button-border-radius: 100px;

}

*{
        font-family: Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6{
        color: var(--title-text-color);
        margin: 0px;
}

p{
        color: var(--text-color);
        font-size: var(--body-text-size);
}

h1{
        font-size: var(--main-title-text-size);
        margin: 0;

}

h2{
        font-size: var(--sub-title-text-size);
        margin: 0;
}

.primary-btn, .secondary-btn {
        background-color: var(--primary-color);
        color: var(--secondary-color);
        font-size: var(--body-text-size);
        padding: 12px 24px;
        border-radius: var(--button-border-radius);
        border: none;
        text-decoration: none;
        width: fit-content;
        display: flex;
        flex-direction: row;
        align-items: center;  
        gap: 14px;            
        transition: 0.4s ease;
        max-height: 30px;         
}
    
.primary-btn {
        background-color: var(--primary-color);
        color: var(--secondary-color);
}
    
.secondary-btn {
        background-color: transparent;
        color: var(--primary-color);
        padding: 10px 22px; 
        border: 2px solid var(--primary-color);
}
    
.primary-btn img {
        width: 24px;
        height: auto; 
}
    
.primary-btn:hover, .secondary-btn:hover {
        background-color: var(--button-hover-color);
        color: var(--secondary-color);
        box-shadow: 0 0 5px rgba(1, 72, 148, 0.5);
}

    
.secondary-btn:hover {
        border: var(--button-hover-color) solid 2px;
}
    
.center{
        text-align: center;
}


.page-indicator{
        margin: 8% 0 5%  8%;

}

.page-indicator h2{
        width: fit-content;
        padding: 5px 10px;
        font-weight: 500;
        font-size: var(--small-title-text-size);
        border-bottom: var(--accent-color) solid 2px;
}

.section-header{
        width: 60%;
        display: flex;  
        flex-direction: column;        
        text-align: center;
        align-items: center;
        margin: auto;
}

/*************************************************************************************************************************************************************
NAVBAR SECTION STYLING
*************************************************************************************************************************************************************/
.nav-bar{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        top: 0;
        left: 0;
        z-index: 1000;
        position: fixed;
        background-color: var(--secondary-color);
}

.desktop-nav {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 50px;
        list-style: none;
}

.desktop-nav li a{
        font-size: var(--body-text-size);
        text-decoration: none;
        padding: 5px;
        color: var(--inactive-color);
        transition: color 0.6s;
}

.desktop-nav li .active, .desktop-nav li a:hover{
        color: var(--primary-color);
        border-bottom: #003366 solid 2px;
}

.CTA-group{
        display: flex;
        flex-direction: row;
        gap: 20px;
        align-items: center;
}

.CTA-group a button{
        text-decoration: none !important;
}

/* Mobile Menu Button */
.mobile-menu-button {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
}
    
.mobile-menu-button svg {
        width: 24px;
        height: 24px;
        stroke: var(--primary-color);
}

/* Mobile Navigation Menu */
.mobile-menu {
        display: none; 
        position: fixed;
        top: 0;
        right: -100%; 
        width: 90%;
        height:fit-content;
        background-color: var(--secondary-color);
        transition: right 0.5s ease;
        z-index: 1001;
        padding: 20px;
}
    
.mobile-menu ul {
        display: flex;
        flex-direction: column;
        gap: 20px;
        list-style: none;
        margin: 0;
        padding: 20px;
}

.mobile-menu ul li {
        width: 100%;
}
    
.mobile-menu ul li a {
        font-size: var(--body-text-size);
        text-decoration: none;
        color: var(--text-color);
        transition: color 0.6s;
}
    
.mobile-menu ul .active {
        color: var(--primary-color);
        border-bottom: #003366 solid 1px;
}

.menu-close-btn{
        width: 97%;
        margin: 5px auto;
        padding: 10px 20px;
        border: none;
        background-color: #003366;
        color: #f1f8ff;
        font-size: var(--body-text-size);
        border-radius: var(--button-border-radius);
}

.menu-close-btn span{
        float: right;
}
    
/* Show mobile menu when active */
.mobile-menu.active {
        display: block;
        right: 0;
}

       

/*************************************************************************************************************************************************************
LANDING PAGE STYLING
*************************************************************************************************************************************************************/

/*************************************************************************************************************************************************************
HERO SECTION STYLING
*************************************************************************************************************************************************************/

.hero{
        height: 100vh;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 100px;
}

.hero-text-content{
        width: 600px;
}

.hero-text-content h1, .hero-text-content h2, .hero-text-content h3{
        color: var(--accent-color);
        margin: 5px auto;
}

.hero-text-content h2, .hero-text-content h3{
        color: var(--primary-color);
}

.hero-CTA{
        display: flex;
        flex-direction: row;
        gap: 20px;
        align-items: center;
        margin-top: 30px;
}

.hero-CTA a{
        text-decoration: none;
}


.hero-img img{
        width: 500px;
}


/*************************************************************************************************************************************************************
LUNARTECH SUMMARY SECTION STYLING
*************************************************************************************************************************************************************/

.lunartech-summary-section {
        position: relative;
        margin-bottom: 200px;
}
    
.lunartech-summary {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 40%;
        margin: 200px auto;
        padding: 100px 150px;
        background-image: linear-gradient(45deg, #f1f8ff, #fffbe5);
        border-radius: var(--regular-border-radius);
        border: 1px solid var(--primary-color); 
        background-clip: padding-box; 
        position: relative;
        z-index: 2; 
}     
    

.lunartech-summary p{
        margin-bottom: 40px;
}

.arrow_icon {
        margin-left: 8px;
        stroke: var(--primary-color);
        stroke-width: 2;
        fill: none;
        transition: stroke 0.3s ease;
}
    
.secondary-btn:hover .arrow_icon {
        stroke: white;
}

.divider {
        position: absolute; 
        top: 50%; 
        left: 0; 
        width: 100%;
        height: 1px;
        background-color: var(--primary-color);
        /*background-image: linear-gradient(90deg, var(--primary-color), var(--accent-color));*/
        border: none; 
        z-index: 1;
        margin: 0;
}



/*************************************************************************************************************************************************************
SERVICES SECTION STYLING
*************************************************************************************************************************************************************/
.services-section{
        width: 70%;
        margin: auto;
}

.services-card-wrap .row{
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: start;
        flex-wrap: wrap; 
        gap: 30px;
        margin: 30px auto;
}

.service-card{
        flex: 1; 
        max-width: 300px;
        border-radius: var(--regular-border-radius);
        border-bottom: var(--accent-color) solid 3px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;;
        padding: 20px;
        box-sizing: border-box;
}

.service-icon{
        width: 42px;
        padding: 10px 0px;
}

.service-card p{
        font-size: var(--captions-text-size);
}

.service-card hr{
        border: var(--accent-color) solid 1.5px;
}


/*************************************************************************************************************************************************************
PORTFOLIO PREVIEW SECTION STYLING
*************************************************************************************************************************************************************/

.portfolio-preview{
        width: 100%;
        margin:  200px auto;
        display: flex;
        flex-direction: column;
        gap: 50px;
        background: linear-gradient(180deg, rgba(2, 0, 36, 0) 0%, rgba(0, 51, 102, 0.116) 50%, rgba(0, 51, 102, 0) 100%);
        position: relative; /* Required for positioning the scroll indicator */
        overflow: hidden; 
}

.portfolio-preview .header{
        width: 800px;
        margin: auto;
}


.portfolio-preview-card-wrap{
        width: 95%;
        margin: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 30px;
        overflow-x: scroll;
        white-space: nowrap;
        scroll-behavior: smooth; 
}

/* Hide the scrollbar in Webkit browsers (Chrome, Safari, etc.) */
.portfolio-preview-card-wrap::-webkit-scrollbar {
        display: none;
}

/* Hide scrollbar in Firefox */
.portfolio-preview-card-wrap{
        scrollbar-width: none; 
        height: fit-content;
}

.portfolio-card{    
        background-color: #fff; 
        border-radius: var(--regular-border-radius); 
        width: 30%;
        height: 30%;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.portfolio-img img{
        width: 100%;
        height: 100%;
        border-radius: var(--regular-border-radius);
}


.portfolio-description{
        width: 100%;
        padding: 20px;
}

.portfolio-description h3{
        margin: 0px;
}

.portfolio-description p{
        font-size: var(--captions-text-size);
        margin: 10px 0;
}

/*************************************************************************************************************************************************************
SCROLL INDICATOR STYLING
*************************************************************************************************************************************************************/

.scroll-indicator {
        display: none;
    }
    
.scroll-indicator .indicator-arrow {
        font-size: var(--captions-text-size);
        color: var(--primary-color);
        font-weight: bold;
}
    
/* Bounce animation for the scroll indicator */
@keyframes bounce {
        0%, 20%, 50%, 80%, 100% {
            transform: translateY(-50%);
        }
        40% {
            transform: translateY(-60%);
        }
        60% {
            transform: translateY(-40%);
        }
}

/*************************************************************************************************************************************************************
PORTFOLIO MODEL STYLING
*************************************************************************************************************************************************************/
#portfolioPopup {
        display: none;
        position: fixed;
        z-index: 5; 
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0,0,0,0.9); 
}

    
/* Close button */
#closePopup {
        color: var(--inactive-color);
        float: right;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
}
    
#closePopup:hover,
#closePopup:focus {
        color: var(--primary-color);
        text-decoration: none;
        cursor: pointer;
}


.popup-model{
        width: 80%;
        height: 80vh;
        background-color: var(--secondary-color);
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        margin: 5% auto;
        padding: 20px;
        border: 1px solid #888;
        border-radius: 10px;
        position: relative;
}

.portfolio-content{
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
   align-content: center;
   margin: auto;
}

.project-details{
        width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: center;
}

.project-details h2, .project-details h4{
        margin-bottom: 20px;
}

.project-details p{
        font-size: var(--captions-text-size);
        margin: 0px;
        margin-bottom: 20px;
}


.project-views {
        flex: 1;
        overflow: hidden; 
}
    
.project-views-row {
        max-height: 70vh;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        padding: 10px;
}
    
/* Optional: Style scrollbar */
.project-views-row::-webkit-scrollbar {
        width: 8px;
}
    
.project-views-row::-webkit-scrollbar-thumb {
        background-color: var(--primary-color);
        border-radius: 4px;
}
    
.project-views-row::-webkit-scrollbar-track {
        background-color: #f1f1f1;
 }

.project-views-row img{
        width: 90%;
        border-radius: var(--regular-border-radius);
}

/*************************************************************************************************************************************************************
PORTFOLIO PAGE STYLING
*************************************************************************************************************************************************************/

.portfolio-section{
        width: 90%;
        margin: 40px auto;
}

.portfolio-card-wrap .row{
        width: 95%;
        margin: 50px auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 30px;
}

.portfolio-form-section{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: auto auto 10% auto;
}

/*************************************************************************************************************************************************************
WHAT MAKES US DIFFERENT SECTION STYLING
*************************************************************************************************************************************************************/
.what-makes-our-work-different{
        width: 80%;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
        margin-top: 200px;
}

.wmowd-content-wrap{
        display: flex;
        flex-direction: row;
        gap: 50px;
}

.wmowd-content-wrap img{
        width: 90px;
}

.wmowd-content{
        width: 300px;
        text-align: center;
}



/*************************************************************************************************************************************************************
TESTIMONALS SECTION STYLING
*************************************************************************************************************************************************************/

.testimonial {
        width: 60%;
        margin: 150px auto;
}

.testimonial h1{
        width: 800px;
}

.testimonial-card-wrap{
        display: flex;
        flex-direction: row;
        gap: 50px;
}

.testimonial-card{
        display: flex;
        flex-direction: column;
        align-items: center;
        border: var(--accent-color) solid 1px;
        border-radius: var(--regular-border-radius);
        padding: 20px;
        background-image: linear-gradient(45deg, #f1f8ff, #fffbe5);
}

.testimonial-card img{
        width: 90px;
}

.testimonial-card p{
        font-size: var(--captions-text-size);
        font-style: italic;
}


/*************************************************************************************************************************************************************
ABOUT PAGE STYLING
*************************************************************************************************************************************************************/

/*************************************************************************************************************************************************************
OUR STORY SECTION STYLING
*************************************************************************************************************************************************************/
.our-story-section{
        width: 65%;
        margin: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 100px;
}

.our-story-img{
        width: 40%;
}


/*************************************************************************************************************************************************************
MISSION AND VISION SECTION STYLING
*************************************************************************************************************************************************************/

.mission-and-vision-section{
        width: 65%;
        margin: 8% auto;
        padding: 50px 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;  
        background-image: linear-gradient(45deg,#f1f8ff, #fffbe5 );
        border-radius: var(--regular-border-radius);
}

.mission-and-vision-card-wrap{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 50px;
}

.mission-card, .vision-card{
        width: 300px;
        padding: 30px;
        border-radius: var(--regular-border-radius);
}

.mission-card p, .vision-card p{
       font-size: var(--captions-text-size);
}

.mission-card {
        background-color: #f1f8ff;
        border: var(--primary-color) 1px solid;
 }

 .vision-card {
        background-color:  #fffbe5;
        border: var(--accent-color) solid 1px;
 }


/*************************************************************************************************************************************************************
OUR VALUES SECTION STYLING
*************************************************************************************************************************************************************/
.values-section{
        background-color: var(--primary-color);
        padding: 100px 0px;
}

.values-section-wrap{
        width: 65%;
        margin: auto;
        padding: 50px 0px;
       
}

.values-section-wrap h1, .values-section-wrap h2, .values-section-wrap h3, .values-section-wrap h4{
        color: var(--secondary-color);
}

.values-card-wrap{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
}

.values-card{
        max-width: 20%;
        height: 13vh;
        margin-top: 30px;
        padding: 20px;
        border-radius: var(--regular-border-radius);
        border-bottom: var(--accent-color) solid;
        box-shadow: rgba(255, 255, 255, 0.301) 0px 2px 8px 0px;
        
}

.values-card p{
        font-size: var(--captions-text-size);
}

/*************************************************************************************************************************************************************
ACHIEVEMENTS SECTION STYLING
*************************************************************************************************************************************************************/

.achievement-section{
        width: 40%;
        margin: auto;
        text-align: center;
        padding: 100px 0px;
}

.achievement-section h2, .achievement-section h1{
        color: var(--secondary-color);
}

.achievement-content{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 30px;
}

.achievement-content span{
        color: var(--accent-color);
}

.clients, .complete-projects, .countries{
        padding: 0px 50px;
        margin: 30px 0px;
}

.clients p, .complete-projects p, .countries p{
       font-size: var(--body-text-size);
       margin-bottom: 0px;
}

.complete-projects{
        border-left: solid 1px var(--accent-color);
        border-right: solid 1px var(--accent-color);
}

/*************************************************************************************************************************************************************
FOUNDER SECTION STYLING
*************************************************************************************************************************************************************/

.founder-section{
        width: 50%;
        margin: 100px auto;
}

.founder-section-header{
        text-align: center;
}

.founder-content{
        display: flex;
        flex-direction: row;
        gap: 30px;
        border: #003366 1px solid;
        border-radius: var(--regular-border-radius);
        background-image: linear-gradient(45deg, #fffbe5 ,#f1f8ff );

}

.founder-content img{
        width: 25%;
        border-radius: var(--regular-border-radius);
}

.founder-story{
        padding: 30px;
}


/*************************************************************************************************************************************************************
CONTACT PAGE STYLING
*************************************************************************************************************************************************************/

/*************************************************************************************************************************************************************
CONTACT SECTION STYLING
*************************************************************************************************************************************************************/
.contact-section{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 65%;
        margin: auto;
}

.contact-info{
        width: 35%;
}

.email, .phone{
        display: flex;
        flex-direction: row;
        gap: 12px;
        padding: 6px;
        margin: 30px auto;
        align-items: center;
        border: var(--inactive-color) solid 1px;
        border-radius: var(--button-border-radius);
        text-decoration: none;
        transition: border .4s ease;
}

.email:hover,  .phone:hover{
        border-color: var(--primary-color);

}

.email span, .phone span{
        font-size: var(--captions-text-size);
        color: var(--inactive-color);
        margin: 0;
}

.email p,  .phone p{
        font-size: var(--body-text-size);
        margin: 0;
        transition: color .4s ease-in-out;
}

.email p:hover,  .phone p:hover{
        color: var(--primary-color);
}

.contact-form{
        width: 40%;
        padding: 30px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        border-radius: var(--regular-border-radius);
}

.contact-form p{
        font-size: var(--captions-text-size);
        color: var(--text-color);
}


/*************************************************************************************************************************************************************
FORM SECTION STYLING
*************************************************************************************************************************************************************/

.form-group{
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin: 15px 0px;
}

.form-group label, .form-group p{
        font-size: var(--captions-text-size);
        color: var(--title-text-color);
        font-weight: bold;
}

.form-control{
        padding: 10px 15px;
        border: var(--inactive-color) solid 1px;
        border-radius: var(--regular-border-radius);
        background-color: #f1f1f1;
        outline: none;
        transition: border-color .4s ease;
}

.form-control:focus{
        border-color: var(--primary-color);
        background-color: #fff;
        box-shadow: 0 0 5px rgba(1, 72, 148, 0.5);
}

textarea{
        height: 100px;
        border-radius: var(--regular-border-radius) !important;
        font-size: var(--body-text-size);
}



/*************************************************************************************************************************************************************
FAQs SECTION STYLING
*************************************************************************************************************************************************************/

.faq-section {
        width: 50%;
        margin: 200px auto;
        border:  var(--primary-color) solid 1px;
        border-radius: var(--regular-border-radius);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30px;
}
    
.faq-content-wraper {
        width: 100%;
}
    
.question-tab {
        width: 40%;
        height: fit-content !important;
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: var(--regular-border-radius);
        border: var(--inactive-color) 1px solid;
        transition: 0.4s ease;
        cursor: pointer;
        margin-bottom: 10px;
}
    
.question-tab:hover {
        border: var(--primary-color) 1px solid;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.question{
        display: flex;
        flex-direction: row;
}
    
.question-tab p {
        width: 100%;
        margin: 0;
}
    
.question-tab span {
        color: var(--accent-color);
}
    
.answer {
        display: none;
        padding-top: 10px;
        color: var(--title-text-color);
        font-size: var(--body-text-size);
}
    
.question-tab.active .answer {
        display: block;
}
    
.question-tab.active span {
        content: "-";
}
    
.row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 16px auto;
}

/*************************************************************************************************************************************************************
FOOTER SECTION STYLING
*************************************************************************************************************************************************************/

.footer{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 90%;
        margin: auto;
        padding: 50px 0px 0px 0px;
        background-color: #16283a;
        color: var(--secondary-color);
        border-radius: var(--regular-border-radius);
}

.footer-content{
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items:flex-start;
      justify-content: space-evenly;
      padding: 30px;

}

.why-choose-us, .footer-quick-link, .social-icons {
        margin: 0px;
        width: fit-content;
}

.why-choose-us{
        width:20%;
}


.why-choose-us p{
        font-size: var(--captions-text-size);
}

.footer-quick-link li, .social-icons li{
 list-style: none;
 font-size: var(--captions-text-size);
}

.footer-quick-link li a, .social-icons li a{
        color: var(--secondary-color);
        display: flex;
        padding: 5px;
        text-decoration: none;
        transition: color 0.3s;
}

.footer-quick-link li a:hover, .social-icons li a:hover{
        color: #606061;
        
}

.why-choose-us h3, .footer-quick-link h3, .social-icons h3{
        color: #f1f8ff;
        margin: 10px 0px; 
}

.footer-rebon{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 5px 100px;
        background-color: var(--button-hover-color);
}


.footer-rebon p, .footer-rebon a{
        width: fit-content;
        font-size: var(--captions-text-size);
}


.footer-rebon a{
       color: var(--secondary-color);
}

.footer-rebon a:hover{
        color: var(--text-color);
 }


/*************************************************************************************************************************************************************
TERMS & PRIVACY POLICY PAGE STYLING
*************************************************************************************************************************************************************/
.terms-of-use-section{
        width: 60%;
        height: 100vh;
        top: 0;
        left: 10%;
        z-index: 1000;
        position: absolute;
        background-color: #051d49df;
        padding: 5% 10%;
        color: var(--secondary-color) !important;
}

.terms-of-use-section h1, .terms-of-use-section ol h2, .terms-of-use-section ol p, .terms-of-use-section ol li h3, .terms-of-use-section ol li p, .terms-of-use-section ol li p a{
        color: var(--secondary-color) !important;
}

.watermark{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
}


 @media screen  and (max-width: 768px) {

        :root{
               
                --main-title-text-size: 2rem;
                --sub-title-text-size: 1.2rem;
                --small-title-text-size: 1rem;
                --body-text-size: .8rem;
                --captions-text-size: .7rem;
        
        }

        .primary-btn, .secondary-btn {
                padding: 9px 18px;
                gap: 5px;            
                height: 45px;         
        }
            
        .primary-btn {
                background-color: var(--primary-color);
                color: var(--secondary-color);
        }
            
        .secondary-btn {
                padding: 8px 20px; 
        }
            
        .primary-btn img {
                width: 22px;
        }


        .section-header{
                width: 80%;
        }


        .desktop-nav, .CTA-group {
            display: none !important;
        }

        .mobile-menu-button {
                display: block;
                color: var(--primary-color);
        }



        .hero{
                margin-top: 2%;
                height: 100vh;
                flex-direction: column-reverse;
                gap: 50px;
        }
        
        .hero-text-content{
                width: 80%;
                text-align: center;
        }

        .hero-CTA{
                justify-content: space-between;
                margin-top: 20px;
        }
        
        .hero-img{
                width: 80%;
                align-items: center;
                justify-content: center;
        }

        .hero-img img{
                width: 100%;
        }
        

        .lunartech-summary {
                width: 70%;
                margin: 100px auto;
                padding: 30px;
        }

        .lunartech-summary p{
                font-size: var(--captions-text-size);
                margin-bottom: 20px;
        }

        .portfolio-preview{
                width: 100%;
                margin:  100px auto;
                gap: 50px;
        }

        .portfolio-preview .header{
                width: 80%;
        }

        .portfolio-preview-card-wrap{
                width: 90%;
        }

        .portfolio-card{
                width: 250px;
                height: fit-content;
        
        }

        .portfolio-img img{
                width: 250px;
                height: 200px;
                border-radius: var(--regular-border-radius);
        }

        .portfolio-description{    
                width: 200px;
                margin: auto;
                padding: 15px;
        }


        .portfolio-preview-card-wrap{
               justify-content: flex-start;
        }

        .portfolio-card-wrap .row{   
                flex-direction: column;
        }

        .scroll-indicator {
                position: absolute;
                right: 0;
                top: 60%;
                transform: translateY(-50%);
                width: fit-content;
                height: 30px;
                padding: 15px;
                margin-right: 20px;
                background: rgba(250, 249, 249, 0.945);
                border-radius: var(--regular-border-radius);
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                cursor: pointer;
                z-index: 10;
                animation: bounce 2s infinite;
        }

        .popup-model{
                margin-top: 25%;
                height: fit-content;
        }

        .portfolio-content{
                flex-direction: column;
             }


        .project-details{
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: start;
                align-items: start;
                max-height: 50vh;
                overflow-y: auto;
        }

        .project-views-row {
                max-height: 30vh;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                gap: 20px;
                padding: 10px;
        }

        .what-makes-our-work-different{
                gap: 30px;
                justify-content: center;
                margin-top: 100px;
        }
        
        .wmowd-content-wrap{
                flex-direction: column;
                gap: 20px;
        }
        
        .wmowd-content-wrap img{
                width: 50px;
        }
        
        .wmowd-content{
                width: 70%;
                margin: auto;
        }


        .testimonial {
                width: 70%;
                margin: 100px auto;
        }
        
        .testimonial h1{
                width: 80%;
        }
        
        .testimonial-card-wrap{
                display: flex;
                flex-direction: column;
                gap: 30px;
        }
        
        .testimonial-card{
                display: flex;
                flex-direction: column;
                align-items: center;
                border: var(--accent-color) solid 1px;
                border-radius: var(--regular-border-radius);
                padding: 10px;
                background-image: linear-gradient(45deg, #f1f8ff, #fffbe5);
        }
        
        .testimonial-card img{
                width: 20%;
        }
        
        .testimonial-card p{
                font-size: var(--captions-text-size);
                font-style: italic;
        }

        .our-story-section{
                width: 85%;
                margin: auto;
                flex-direction: column-reverse;
                gap: 15px;
        }
        
        .our-story-img{
                width: 60%;
        }
        
        .mission-and-vision-section{
                width: 90%;
                margin: 8% auto;
                padding: 25px 0px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 20px;  
        }
        
        .mission-and-vision-card-wrap{
                gap: 10px;
        }
        
        .mission-card, .vision-card{
                width: 80px;
                padding: 20px;
        }


        .values-section{
                padding: 100px 0px;
        }
        
        .values-section-wrap{
                width: 80%;
                padding: 10px 0px;
               
        }
        
        .values-card-wrap{
                flex-direction: column;
        }
        
        .values-card{
                max-width: 100%;
                height: fit-content;   
                margin-top: 30px;
                padding: 10px;      
        }


        .achievement-section{
                width: 80%;
        }
        
        .achievement-content{
                gap: 0px;
        }
        
        .clients, .complete-projects, .countries{
                padding: 0px 20px;
                margin: 30px 0px;
        }
        
        .clients p, .complete-projects p, .countries p{
               font-size: var(--body-text-size);
               margin-bottom: 0px;
        }    

        .contact-section{
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 80%;
        }


        .founder-section{
                width: 80%;
        }

        .founder-content{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 10px;

        }

        .founder-content img{
                width: 100%;
        }

        .founder-story{
                padding: 20px;
        }

        founder-story p{
                font-size: var(--captions-text-size);
        }

        
        .contact-info{
                width: 100%;
        }
        
        .contact-form{
                width: 90%;
                margin: 50px auto;
                padding: 30px;
        }


        .email, .phone{
                gap: 10px;
                padding: 4px;
                margin: 20px auto;
        }

        .faq-section {
                width: 90%;
                margin: 100px auto;
                padding: 10px;
                border: none;
        }
        
        .question-tab {
                width: 40%;
                padding: 5px 10px;
        }

        .question{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
        }
        
        .question-tab p {
                width: 90%;
                margin: 0;
        }
        
        .question-tab span {
                float: right;
                color: var(--accent-color);
        }


        .terms-of-use-section{
                width: 100%;
                height: fit-content;
                top: 0;
                left: 0;
                padding: 5%;
        }
        
        .watermark{
                width: 100%;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1;
        }
        
        
        .watermark img{
                width: 80%;
        }


        footer-content{
                width: 100%;
                display: flex;
                flex-direction: column;
        }

        .footer-rebon{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 5px 0px;
        }
        

        .footer{
                width: 92%;
                flex-direction: column;
                justify-content: space-between;
                padding: 0px;
        }
        
        .footer-content{
                width: 80%;
                flex-direction: column;
                padding: 30px;
        }


        .why-choose-us{
                width: 70%;
        }

        .why-choose-us h3, .footer-quick-link h3, .social-icons h3{
                font-size: var(--small-title-text-size);
        }

        .footer-rebon p, .footer-rebon a{
                width: fit-content;
                font-size: xx-small;
        }

        .terms-and-privacy-policy-links{
                width: fit-content;
        }

        
 }