* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    width: 100%;
    height: 100%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/* Heading Section */
.header {
    width: 100%;
    background-color:whitesmoke;
}

.Header_Content {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-around;
    align-items: center;
    padding: 1rem;
}

.logoAndHeading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.logo img {
    height: 45px;
    width: auto;
    background-color: whitesmoke;
    border-radius: 3px;
}

.heading {
    font-size: 2rem;
}

.nav_link {
    text-decoration: none;
    color: #444444;
    font-size: larger;
    padding: 1rem;
    transition: color 0.3s;
}

.nav_link:hover {
    color: blue;
}
.botomm{
    text-decoration: none;
}
.Contact_bottom {
    font-size: medium;
    border-radius: 0.3rem;
    background-color: #050C9C;
    color: rgb(243, 216, 216);
    padding: 0.5rem;
    display: block;
    text-decoration: none;
}

.Contact_bottom:hover {
    background-color:#06D001;
}

.menuButton {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

.menuButton img {
    width: 1.5rem;
    height: 1.5rem;
}

@media screen and (max-width: 768px) {
    .Nav {
        display: none; 
    }
    .menuButton {
        display: block; 
    }
}

@media screen and (min-width: 769px) {
    .Nav {
        display: flex;
        gap: 1rem;
    }
    .menuButton {
        display: none; 
    }
}



/* Content Section */
.content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
    background-color:white;
}

.MainSection {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    align-items: center;
    margin: 0 auto;
    padding: 1rem;
}

.Content_leftbox {
    width: 90%; 
    margin-bottom: 1rem;
    text-align: center;
    animation:slidefromleft 1s ease forwards ;
}
@keyframes slidefromleft {
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
    
}

.Content_rightbox {
    width: 90%; 
}

.section-label {
    color: rgb(12, 12, 197);
    font-size: large;
}

.section-title {
    font-size: 2.3rem;
    color: black;
    padding: 0rem;
   padding-top: 1rem;
}

.section-description {
    color: rgb(84, 81, 81);
    font-size: 1.3rem;
    padding-top: 1rem;
}

.button_content {
    text-align: center;
    gap: 1rem;
    margin-top: 2rem;
}

.StartBotton, .TourBotton {
    color: white;
    background-color: #1230AE;
    font-size: medium;
    padding: 0.6rem 1rem;
    text-decoration: none;
    border-radius: 0.3rem;
    transition: background-color 0.3s;
}

.TourBotton {
    background-color: rgb(15, 13, 13);
    margin-left: 3rem;
}

.StartBotton:hover {
    background-color: red;
}

.TourBotton:hover {
    background-color: rgb(237, 140, 14);
}

.Content_rightbox {
    display: flex;
    justify-content: center;
}

.imageContainer {
    width: 100%;
    height: auto;
}

.Section-image {
    border-radius: 10px;
    width: 100%;
    height: auto;
    object-fit: cover; 
    transition: transform 3s  1s ease-in-out ;
}
.Section-image:hover{
    transform: scale(0.8);
}


/* Company Section */

.companySection{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    margin-top: 2rem;
    gap: 1rem;
    animation: slidefromleft 1s ease forwards;
}

.companyGrid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    row-gap: 2rem;
    column-gap: 3rem;
    background-color:#939185;
    border-radius: 1rem;
}

.companyLogo{
    text-align: center;
    margin: 0 auto;
    padding: 1rem  1rem;
}

.LogoImg{
    width: 2rem;
    height: auto;
}
.logoText{
    font-size: larger;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: bolder;
    margin-left: 0.1rem;
}

/* Responsive Layout */
@media screen and (min-width: 769px) {
    .MainSection {
        flex-direction: row;
        justify-content: space-around;
    }
    .Content_leftbox, .Content_rightbox {
        width: 45%; 
    }
    .Content_leftbox{
        text-align: start;
    }
    .button_content{
        text-align: start;
    }
    .companyGrid{
        grid-template-columns: repeat(4,1fr);
    }
}

/* Styling Features Container */

.featuresContainer{
    height: auto;
    margin-top: 2rem;
    background-color: #F5F7F8;
    padding: 2rem 0;
}
.featuresContent{
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
.mainInfo{
    display: flex;
    flex-direction: column;
    gap:1rem;
    text-align: center;
}
.headingInfo{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 2.6rem;  
}
.paraInfo{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
    color: gray;
}
.featuresGrid{
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    text-align: center;
    column-gap: 2rem;
    row-gap: 3rem;
}
.fearturesCard1{
   background-color: #433878;
   color: white;
   border-radius: 1.2rem;
   padding: 2rem 0rem; 
}
.fearturesCard2{
    background-color: #D91656;
    color: white;
    border-radius: 1.2rem;
    padding: 2rem 0rem;
 }
 .fearturesCard3{
    background-color:#FFB200;
    color: white;
    border-radius: 1.2rem;
    padding: 2rem 0rem;
 }
 .fearturesCard4{
    background-color: #257180;
    color: white;
    border-radius: 1.2rem;
    padding: 2rem 0rem;
 }
 .fearturesCard5{
    background-color:#347928;
    color: white;
    border-radius: 1.2rem;
    padding:2rem 0rem;
 }
 .fearturesCard6{
     background-color: #624E88;
     color: white;
     border-radius: 1.2rem;
     padding: 2rem 0rem;
  }
.bulblogo img{
    height: 3rem;
    width: 3rem;
    border-radius : 50%;
}
.featureinfo{
    text-align: center;
}
.featureTitle{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: white;
    font-size: 1.6rem;
    margin-top: 0.6rem;
}
.featureDiscription{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: medium;
    margin-top: 0.6rem;
}
@media screen and (max-width: 778px) {
    .featuresGrid {
        grid-template-columns: repeat(1, 1fr);
        padding: 0rem 1.3rem;
    }
}

/* Testomonial Section */
.testomonialContainer{
    width: 100%;
    height: auto;
    background-color:whitesmoke;
}
.testomonialContent{
    max-width:1200px ;
    margin: 0 auto;
    text-align: center;
}
.boxes{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 2rem;
    padding: 2rem 1rem;
}
.boxDesign {
    text-align: center;
    background-color:white;
    padding: 1rem 1rem;
    border: 0.1rem solid #444444;
    border-radius:1.2rem ;
    height: auto;
    box-shadow: 0px 2px 1px rgba(194, 8, 8, 0.1);
    position: relative;
    transition: transform 0.8s ease, box-shadow 0.3s ease;
}
.boxDesign:hover{
    transform: scale(1.05);
    box-shadow: 2px 2px 1px #3C3D37;
    border: 1px solid #1230AE;
}
.testomonialpara{
    color: #3C3D37;
    font-size: medium;
    font-family:Arial, Helvetica, sans-serif;
}
.testomonialImage img{
    width: 80px;
    height: auto;
    border-radius: 50%;
    padding:1rem 0rem;
}
.testomonialName h3{
    color: #050C9C;
}
@media screen and (max-width: 778px) {
    .boxes {
       flex-direction: column;
    }
}
/* News letter section */
.newsLetterSection{
    width: 100%;
    background-color:whitesmoke;
    height: auto;
}
.newsLetterContent{
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1rem;
    background-color:rgb(235, 233, 233);
    display: flex;
    flex-direction: row;
    gap: 2rem;
}
.LEFTBOX{
    width: 48%;
    height: auto;
}
.LEFTBOX img{
    width: 100%;
}
.RIGHTBOX{
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
    width: 52%;
}
.heading-Para h2{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 3rem;
    color: blue;
}
.heading-Para p{
    color: #3C3D37;
    font-size: larger;
}
.email-button input{
    width: 13rem;
    height: 2rem;
    font-size: medium;
    text-align: start;
    padding: 0.7rem;
}
.submitButton{
    background-color: #050C9C;
    color: #F5F7F8;
    width: 4rem;
    height: 1.9rem;
}
.submitButton:hover{
    background-color: #FFB200;
    color:#050C9C;
    font-size: large;
}
.footerParagraph{
    color: #444444;
}
@media screen and (max-width:910px) {
   .LEFTBOX{
    display: none;
   }
   .RIGHTBOX{
    width: 100%;
    text-align: center;
   }
}

/* Footer Section */
.footer-Container{
    width:100%;
    background-color:whitesmoke;
}
.footer{
    max-width:1200px;
    box-shadow: 0px 2px 1px grey;
    margin:0 auto;
    padding: 1rem 1rem;
    display: flex;
    flex-direction: row;
    gap:1rem;
}
.footer-left{
    width: 40%;
}
.footer-left-width{
    display: flex;
    flex-direction: column;
    gap:1.3rem;
    width: 100%;
}
.footer-right{
    width: 60%;
    padding: 0rem 5rem;
}
.footer-right-width{
    width: 100%;
}
.company-logo img{
    width:40px;
}
.logoImageCompany{
    text-decoration: none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.5rem;
}
.footer-Para{
    color: #444444;
    font-size: large;
}
.companylogo-Image{
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.companylogo-Image img{
    width: 30px;
}

.footerGridColumn{
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
.footerGridHeading{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:  black;
    font-size: 1.5rem;
}
.Footer-LinkList a{
    text-decoration: none;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
    color: #444444;
}
.Grid .Footer-LinkList{
    padding-top:1rem ;
}
.Footer-LinkList li{
    row-gap:10rem;
}
ul{
    list-style-type:none ;
}
.Footer-LinkList{
    display: flex;
    flex-direction: column;
    row-gap: 1.2rem;
}
.footer-copyright{
    padding-top: 1rem;
    text-align: center;
    color: #444444;
}
@media screen and (max-width: 1100px) {
    .footer{
        flex-direction: column;
       }
       .footer-right{
        padding: 1rem 0rem;
       }
       .footer-left{
        width: 100%;
       }
       .footer-right{
        width: 100%;
       }
    .footerGridColumn {
        grid-template-columns: repeat(2, 1fr); 
        gap: 1rem; 
    }
}