/* Font face definitions */
@font-face {
    font-family: 'Roboto-Regular';
    src: url(fonts/Roboto-Regular.ttf) format('truetype');
    font-style: normal;
}


@font-face {
    font-family: 'Roboto-Medium';
    src: url(fonts/Roboto-Medium.ttf) format('truetype');
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url(fonts/Roboto-Bold.ttf) format('truetype');
    font-style: normal;
}


body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto-Regular';
    height: 100%; 
    border-top: 2.8px solid #e58d41;
}

.container {
    max-width: 1280px;
    padding: 0 2%;
    margin: 0 8%; 
    box-sizing: border-box; 
    border: 20px red;  
}

.header {
    display: flex;
    flex-direction: column; 
    align-items: center; 
}

.logo {
    width: 18%; 
    height: auto; 
    margin: 3% 0;
}

.navbar {
    border-top: 2px solid #080808 ;
    display: flex;
    width: 100%;
    justify-content: center; 
    align-items: center;
    border-bottom: 2px solid #080808; 
    padding: 10px 0; 

}

.navbar a {
    font-family : 'Roboto-Bold';
    font-size: 1vw;
    color: #080808; 
    text-decoration: none; 
    padding: 0.2% 20px; 
}

.navbar a:hover {
    color: #e58d41; 
}


.menu-icon {
    display: none;
    width: 3%;
    height: auto;
    cursor: pointer;
}


@media (max-width: 768px) {
    .navbar {
        display: none; 
    }

    .container {
        padding: 0 2%;
        margin: 0 auto;
    }

    .menu-icon {
        display: block; 
        margin-top: 2% ;
    }
    .header {
        flex-direction: row;
        justify-content: space-between;
        
    }
    .logo {
        margin: 2% 0;
    }
}

@media (max-width: 425px) {
    .logo {
       width : 36%;
    }

    .menu-icon {
        width: 6%;
        margin-top: 6% ;
    }

}


.slider-img {
    width: 100%;
    height: auto;
    object-fit: cover; 
    margin: 2% 0;
}

.section-common {
    text-align: center;
    font-family : 'Roboto-Regular';
}

.section-common h1 {
    color: #080808;
    font-size: 3vw;
    position: relative; 
    display: inline-block; 
}

.section-common h1::after {
    content: '';
    display: block;
    width: 10%; 
    border-bottom: 0.3vw solid #080808; 
    position: absolute;
    left: 50%; 
    bottom: -0.5em; 
    transform: translateX(-50%); 
}

@media (max-width: 768px) {
    .section-common h1 {
        font-size: 5vw; 
    }

    .section-common h1::after {
        border-bottom: 0.4vw solid #080808; 
    }
}

@media (max-width : 425px) {
    .section-common h1 {
        font-size: 8vw; 
    }

    .section-common h1::after {
        border-bottom: 1vw solid #080808; 
    }

}


/* Image Showcase Section  */
.showcase-images {
    display: flex;
    justify-content: center; 
}

.showcase-images img {
    width: 22%; 
    height: auto; 
    border-radius: 50%; 
    object-fit: cover; 
    margin: 2% 3%;
}

/* History Section */
.history {
    margin-bottom:6%;
}
.history h1::after {
  width:20%;
}
.history p {
    text-align: justify;
    font-family:'Roboto-Regular';
    /* color: #494949; */
    color:#080808;
}

@media (max-width :425px) {
   .showcase-images {
    flex-wrap : wrap;
   }

   .showcase-images img {
    width : 45%;
    margin: 2% 2%;
   }

}


/* Dummy Content */

.dummy-content {
    padding: 0 7%;
    margin: 2% 0;
}

.dummy-image {
    float: right;
    margin: 1% 1.8%;
    width: 30%;
    height: auto;
    object-fit: cover;     
}

.dummy-content p {
    margin: 1%;
    margin-bottom : 1.4%;
    text-align: justify;
    font-fomily:"Roboto-Regular";
    color:#080808;
    /* color: #494949; */
}

.read-more-btn {
    padding: 2% 4%; 
    margin : 3% 0;
    border: 1.6px solid-black;
    background-color: white; 
    color: #080808; 
    /* color: #494949; */
    font-family: 'Roboto-Bold', sans-serif; 
    font-size: 16px; 
    cursor: pointer; 
    text-align: center;
    transition: background-color 0.3s, color 0.3s; 
}
.read-more-btn:hover {
    background-color: #080808 ; 
    color: white; 

}

@media (max-width: 768px) {
    .dummy-content {
        padding: 0;
        margin: 0 auto;
    }

    .dummy-content p {
        margin: 0;
        padding: 0;
    }
}

/* Footer */

.footer {
    border-top: 2px solid black;
    border-bottom: 2px solid black; 
    padding: 1% 10%;
}

.footer-content {
    display: flex;
    align-items : center;
    justify-content:space-between;
}

.footer-content p {
   font-family: "Roboto-Regular";
   /* color: #494949; */
   color:#080808;
   font-weight :normal;
   padding:0;
   margin:0;
}
.footer-content span {
    color : #e58d41;
}

.footer-image {
    vertical-align: middle; 
    margin: auto 0;
    width: 2.8%;
    height: auto; 
}

@media (max-width: 768px) {
    .footer {
        padding: 1% 2%;
    }

}

@media (max-width : 425px) {
    .footer-content {
        flex-direction : column;
        align-items : start;
        justify-content:space-between;
    }
    .footer-content p {
        margin: 1% 0;
    }
    .footer-image  {
        width : 4%;
    }

}