* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


body {

    font-family: Arial, Helvetica, sans-serif;
    

}


/* Navbar */

nav {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: #111;
   padding: 20px 80px;
}


.logo {

    text-align: center;

}


.logo h2 {

    color: white;

    font-size: 36px;

}


.logo span {

    color: #d4a017;

}


.logo p {

    color: #d4a017;

    font-size: 14px;

}


nav ul {

    display: flex;

    list-style: none;

    gap: 35px;

}


nav ul li a{

    color:white;

    text-decoration:none;

    transition:.3s;

    font-weight:500;

    font-size: 18px;

}

nav ul li a:hover,

nav ul li a.active{

    color:#D4A63E;

}

.btn {

    background: #d4a017;

    color: white;

    padding: 12px 35px;

    text-decoration: none;

    border-radius: 6px;
    
    border-radius: 6px;

     transition:.4s;

}



.btn:hover{

    background:#111;

}


/* ===========================

   jojo

=========================== */

.jojo{

    height:50vh;

    background:url(images/hero3.png) center/cover;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

    display:flex;

    margin: 40px 0;

}

.overplay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.60);

}

.jojo-text{

    position:relative;

    z-index:2;

    color:white;

}

.jojo-text span{

    color:#D4A63E;
    margin-top:90px;

    letter-spacing:4px;

    font-size:14px;

    font-weight:600;
    

}

.jojo-text h1{

    font-size:55px;

    margin:10px 0;

}

.jojo-text p{

    

    color:#ddd;

    line-height:1.8;

    text-align:center;

}



/* ===========================

   about contect

=========================== */


.about-content {
   width: 80%;
   margin: 90px auto;
   
}
.about-section {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 55px;
   align-items: center;
   margin-bottom: 18px;
}


.about-image img{

    width:500px;

    height: 380px;

    border-radius:14px;

    display:block;

    box-shadow:0 16px 32px rgba(0,0,0,.15);

    transition:.4s;

}

.about-image img:hover{

    transform:scale(1.03);

}

.about-section h4{

    color:#D4a017;

    font-size:15px;

    margin-bottom:12px;

}

.about-section h2{

    font-size:34px;

    margin-bottom:16px;

}

.about-section p{

    color:#666;

    line-height:1.7;

    margin-bottom:20px;

    font-size:15px;

}

/* Mission & Vision */
.mission-vision{
   display: grid;
   grid-template-columns: repeat(2,1fr);
   gap: 35px;
   margin-bottom: 70px;
   
   
}
.card{
   
   border-radius: 15px;
   padding: 30px;
   display: flex;
   align-items: center;
   gap: 25px;
   border: 1px solid #d1d1d1;
    background-color:#f0e8d3;
   
}

.icon{
   width: 85px;
   height: 85px;
  
   border-radius: 15px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.icon i{
   color: #D4A017;
   font-size: 32px;
}
.info h3{
   color: #111;
   margin-bottom: 12px;
   font-size: 20px;
}
.info p{
   color: #666;
   line-height: 1.7;
}

/* our value */
.values {
    
    color: white;
    padding: 10px 40px 20px;
    text-align: center;
    
    
    
}

.values h2 {
    
    font-size: 20px;
    margin-bottom: 25px;
    color: #D4A017;
}

    .value-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 250px));
    justify-content: center;
    gap: 15px;
    
}


.value {
    border: 1px solid #d1d1d1;
    padding: 15px 10px;
    border-radius: 10px;
    transition: .3s;
    
}

.value:hover {
    transform: translateY(-5px);
}

.value i {
    font-size: 28px;
    color: #D4A63E;
    margin-bottom: 10px;
}

.value h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #000000;
}

.value p {
    font-size: 13px;
    color: #111;
    line-height: 1.5;
}
 
/* Footer */


footer {
    background: #111;
    color: white;
    padding: 40px 100px 20px;
}

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

.footer-item {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
}

.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box i {
    color: #D4A63E;
    font-size: 25px;
}

.footer-item h3 {
    color: #D4A63E;
    margin: 0 0 5px;
}

.footer-item p {
    color: white;
    margin: 0;
}

.copyright {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #444;
    color: #aaa;
}

/* ================= MOBILE NAVBAR ================= */

.menu-btn{

    display:none;

}

@media(max-width:768px){

nav{

    padding:15px 20px;

    position: fixed;

}

.menu-btn{

    display:block;

    color:#fff;

    font-size:28px;

    cursor:pointer;

}

nav{

    display:grid;

    grid-template-columns:40px 1fr 40px;

    align-items:center;

}

.logo{

    justify-self:center;

    text-align:center;

}

.logo h2{

    font-size:28px;

}

.logo p{

    font-size:11px;

}

.call-btn{

    width:40px;

    height:40px;

    padding:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:0;

}

.call-btn::before{

    content:"\f095";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    font-size:16px;

}

.nav-links{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#111;

    display:none;

    flex-direction:column;

    text-align:center;

    padding:25px 0;

    gap:20px;

}

.nav-links.active{

    display:flex;

}

/* ================= HERO MOBILE ================= */



.jojo{

    height:40vh;

    padding:0 20px;

    text-align: center;

}

.jojo-content{
   

    max-width:100%;

}


.jojo h4{

    margin-top:150px;

    

    font-size:11px;

}

.jojo h1{

    font-size:28px;

    line-height:1;

   

}

.jojo p{
    display:none;

    font-size:12px;

    margin-bottom:0px;


}



.about-content{

    width:95%;

    margin:45px auto;

}

.about-section{

    display:flex;

    flex-direction:column-reverse;

    gap:20px;

    align-items:center;

    margin-bottom:20px;

}

.about-image img{

    display:none;

}

.about-section h4{

    font-size:14px;

    margin-bottom:12px;

}

.about-section h2{

    font-size:28px;

    margin-bottom:16px;

}

.about-section p{

    font-size:14px;

    line-height:1.7;

    margin-bottom:20px;

}

.about-section ul{

    text-align:left;

    margin-bottom:25px;

    font-size:12.5px;

}





/* Mission & Vision */
.mission-vision{
   display:flex;
   flex-direction:column;
   gap:15px;
   margin-bottom:40px;
}
.card{
   width:100%;
   padding:20px;
   border-radius:15px;
   display:flex;
   align-items:center;
   gap:15px;
}
.icon{
   width:55px;
   height:55px;
}
.icon i{
   font-size:22px;
}
.info h3{
   font-size:17px;
   margin-bottom:8px;
}
.info p{
   font-size:13px;
   line-height:1.6;
}


/* Our Values Mobile */

.value-boxes{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}

.value:first-child{

    grid-column:1 / -1;

}

.value{

    padding:18px 12px;

    border-radius:12px;

    text-align:center;

}

.value i{

    font-size:24px;

    color:#D4A63E;

    margin-bottom:10px;

}

.value h3{

    font-size:15px;

    margin-bottom:8px;

}

.value p{

    font-size:12px;

    line-height:1.5;

}
 


/* ================= FOOTER ================= */

footer{

    padding:35px 20px 15px;

}

.footer-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:17px;

}

.footer-item{

    align-items:flex-start;

    gap:10px;

}

.icon-box i{

    font-size:20px;

}

.footer-item h3{

    font-size:13px;

}

.footer-item p{

    font-size:11px;

}

.footer-item .footr-text{

    font-size:11px;

}

.copyright{

    grid-column:1/-1;

    text-align:center;

    margin-top:25px;

    padding-top:15px;

    font-size:13px;

}

}