@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");

body {
    margin: 0px !important;
    padding: 0px;
    overflow-y: auto;
    font-family: 'Poppins', sans-serif;
    background-color: black;
    overflow-x: hidden;
}

header {
    position: relative;
    height: auto; /* Keep header dynamic */
    overflow: hidden; /* Hide any overflow */
}

nav {
    width: 100%;
    height: 80px; /* Set height for the nav */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10; /* Keep nav on top */
    background-color: #333333cc;

}

header nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 0;
    margin: 0;
    height: 100%;
    align-items: center; /* Align items vertically in the nav */
    margin-right: 0%;

}

header nav ul li {
    margin-right: 20px;

}

header nav ul li a {
    text-decoration: none;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 22px;
    padding: 0 10px;
}

header nav ul li a:hover {
    background-color: #555;
    font-size: 40px;
    border-radius: 10px;
}


header nav ul li img {
    width: 70px;
    height: auto;
    opacity: 1;
    background-color: #ffffff4f;
    padding: 10px;
    border-radius: 10px;
}

header .slider {
    overflow: hidden;
    width: 100%;
    margin-top: 0px;
}

header .slider-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

header .slider-inner .slide {
    min-width: 100%;
    box-sizing: border-box;
    position: relative;
    height: 600px;
}

 
header .slider-inner .slide img {
    width: 100%;
    height: 100%;
    opacity: .2;
}

.slide h1 {
    position: absolute;
top: 50%;
left: 30%;
font-size: 50px;
    color: white;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
background-color: #55555575;
    padding: 20px;
border-radius: 30px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

border-radius: 10px;}



    .section2{
        padding: 170px 70px;
        margin-top: -5%;
    }
    
    .section2 h1{
        margin-left: 40%;
        color: #fff;
        font-size: 50px;
        color: rgb(218, 164, 27);
    }
    
    .section2 hr{
        width: 17%;
        padding: 3px;
        border: none;
        border-radius: 10px;
        background-color:  rgba(128,128,128);
        margin-left: 40%;
        box-shadow: rgba(128,128,128, .4) 5px 5px, rgba(128,128,128, .3) 10px 10px, rgba(128, 128, 128,.2) 15px 15px, rgba(128, 128, 128,.1) 20px 20px, rgba(128, 128, 128, .05)  25px 25px;

    }
    
    .section2 .content{
        display: flex;
        flex-direction: row;
        display: flex;
        gap: 50px;
        flex-wrap: wrap;
        margin-top: 100px;
        justify-content: center;
    }  

   

    
    .section2 .content .partion{
        display: flex;
        flex-direction: row;
        display: flex;
        gap: 50px;
        flex-wrap: wrap;
        margin-top: 30px;
        justify-content: center;
    }
    
    .section2 .content .commercial{
        display: flex;
    flex-direction: row;
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    margin-top: 30px;
    justify-content: center;
}

.section2 .content .commerical h3{
    width: fit-content;
    margin-left: 28%;
    background-color: #18191b;
}

.section2 .content .commercial .cards{
    display: flex;
flex-direction: row;
gap: 30px;
justify-content: center;
}

.section2 .content .commercial .card{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 80%;
    height: auto;
    border-radius:  10px 10px 20px 20px;
    padding-bottom: 50px;
}



    .section2 .content h1{
        margin-left: 0%;
        background-color: #555;
        padding: 10px;
        border-radius: 20px;
        font-family: "Playwrite CU", cursive;

    }

    .section2 .content h3{
        margin-left: 0%;
        background-color: #5555558e;
        padding: 10px;
        border-radius: 20px;
        color: rgb(218, 164, 27);
        font-size: 40px;
    }

    .section2 .content .card{
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 30%;
        height: auto;
        border-radius:  10px 10px 20px 20px;
        padding-bottom: 50px;
    }
    

     
    .section2 .content .card .top {
        width: 100%;
        position: relative;
    }


    .section2 .content .card .top img{
        width: 100%;
        height: 280px;
        border-radius:  20px 20px 60px  60px;
        opacity: .5;

         }

         .section2 .content .card .top h2{
           width: 100%;
           background-color: #555555af;
           font-size: 44px;
    position: absolute;
    top: 50%;
    left: 0px;
text-align: center;
margin-left: 0px;
    transform: translateY(-50%);
    color: white;
             }

             .section2 .content .card .top a{
                position: absolute;
                left: 50%;
                top: 250px;
                transform: translateX(-50%);
text-decoration: none;
color: black;
padding: 10px;
font-size: 20px;
background-color: rgb(218, 164, 27);
border-radius: 20px;
font-weight: 800;
opacity: .8;
font-family: "Playwrite CU", cursive;
            }

    

             .section2 .content hr{
                background-color: rgb(218, 164, 27);
                background-color: rgb(128, 128, 128);
            opacity: .4;
                width: 80%;
                margin-left: 10%;
                box-shadow: rgba(128, 128, 128,.4) 5px 5px, rgba(128, 128, 128,.3) 10px 10px, rgba(128, 128, 128, .2) 15px 15px, rgba(128, 128, 128,.1) 20px 20px, rgba(128, 128, 128, .05)  25px 25px;
             }


             
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


.section3{
    width: 100%;
    height: auto;
    padding: 60px 80px;
    background-color: #18191bbb;
}



.section3 h1{
    font-size: 60px;
    color: rgb(218, 164, 27);
}

.section3 hr{
    width: 17%;
    padding: 3px;
    border: none;
    border-radius: 10px;
    background-color:  rgba(128,128,128);
    margin-left: 20px;
    margin-top: -10px;
    box-shadow: rgba(128,128,128, .4) 5px 5px, rgba(128,128,128, .3) 10px 10px, rgba(128, 128, 128,.2) 15px 15px, rgba(128, 128, 128,.1) 20px 20px, rgba(128, 128, 128, .05)  25px 25px;

}

.section3 .container{
    display: flex;
    flex-direction: row;
   gap: 10px;
   margin-top: 60px;
   padding-bottom: 80px;
}



.section3 .container .left{
   display: flex;
   flex-direction: column;
   gap: 30px;
   width: 65%;
}

.section3 .container .left .card{
color: white;
border-radius: 15px;
padding: 10px;
font-weight: 700;
width: 80%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; 
word-spacing: 8px;
background-color: #18191b;
display: flex;
flex-direction: row;
gap: 20px;
}


.section3 .container .left .card p{
    opacity: .7;
}

.section3 .container .left .card i{
    font-size: 50px;
    height: fit-content;
    color:rgba(218, 164, 27, 0.745);
    margin-top: 20px;
    border: 5px solid rgba(218, 164, 27, 0.245);
padding: 5px;
border-radius: 50%;

}

.section3 .container .right{
    width: 30%;
    margin-right: 200px;
 }



 .section3 .container .right img{
    width: 80%;
    height: auto;
    margin-left: 0px;
    margin-top: 30px;
    border: 5px solid rgba(218, 164, 27, 0.245);
    padding: 20px;
    border-radius: 70px;
    box-shadow: rgba(0, 0, 0, 5.65) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
    transition: transform 0.3s ease-in-out;
    animation: scalePhoto 2s infinite ease-in-out;


 }

 
 .section3 a{
    text-decoration: none;
    color:black;
    font-size: 20px;
    font-weight: 800;
    margin-right: 20px;
    transition: 0.3s;
    text-align: center;
    background-color: gray;
    border-radius: 20px;
    padding: 15px;
    margin-left: 37%;
    opacity: .6;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: fit-content;
    gap: 10px;
 }
 .section3 a i{
    margin-right: 10px;
    font-size: 30px;
    color: white;
 }


 @keyframes scalePhoto {
    0%, 100% {
        transform: scale(1); /* Normal size */
    }
    50% {
        transform: scale(1.2); /* 20% bigger */
    }
}




.page{
    padding: 100px 0px;
        
    }
    
    .section4{
        width: 100%;
        padding: 100px 0px;
        height: auto;
        margin-left: -50px;
    }
    
    
    .section4 h1{
        text-align: center;
        font-size: 40px;
        color: rgb(218, 164, 27);
       }
    
    
    
    
    .section4 .content{
    display: flex;
    flex-direction: row;
    gap: 0px;
    width: 100%;
    /* height: 100px; */
    }
    
    .section4 .content .card1{
    width: 33%;
    height: 100%;
    margin-left: 5%;
    }
    
    .section4 .content .card1 .top{
      display: flex;
      flex-direction: column;
      gap: 2px;
      color: white;
      text-align: left;
      position: relative;
      margin-top: 100px;
        }
        
        .section4 .content .card1 .top h3{
            color: rgb(218, 164, 27); 
            text-align: center;     
            background-color: #555;
            padding: 10px;
            border-radius: 20px; 
            width: fit-content;
            margin-left: 15%;
            font-size: 20px;
    
              }
    
              .section4 .content .card1 .top p{
          font-size: 12px;
        width: 50%;   
        text-align: end;   
        margin-left: 120px;
        opacity: .4;
        }
    
              .section4 .content .card1 .top i{
          position: absolute;
          top:50px;
          left:93%;
          font-size: 50px;
          border: 2px solid   rgb(128, 128, 128);
          border-radius: 50px;
          font-weight: 100;
          padding: 5px;
              }
    
              .section4 .content .card1 .bottom{
                display: flex;
                flex-direction: column;
                gap: 2px;
                color: white;
                text-align: left;
                position: relative;
                margin-top: 0px;
                  }
                  
    
              .section4 .content .card1 .bottom h3{
                color: rgb(218, 164, 27); 
                text-align: center;     
                background-color: #555;
                padding: 10px;
                border-radius: 20px; 
                width: fit-content;
                margin-left: 15%;
                font-size: 20px;
        
                  }
        
                  .section4 .content .card1 .bottom p{
              font-size: 12px;
            width: 50%;   
            text-align: end;   
            margin-left: 120px;
            opacity: .4;
            color: #fff;
            }
        
                  .section4 .content .card1 .bottom i{
              position: absolute;
              top:50px;
              left:93%;
                font-size: 50px;
              border: 2px solid   rgb(128, 128, 128);
              border-radius: 50px;
              font-weight: 100;
              padding: 5px;
                  }
        
                  /* ======================================================================= */
    
                  .section4 .content .card2{
                    width: 33%;
                    height: 100%;
                    background: linear-gradient(to right bottom, black 10%, #55555575 40%, black 88%);
                    border-radius: 30px;
                    padding-bottom: 200px;
                    
                    }
    
    
                  .section4 .content .card2 img{
                    width: 300px;
                    height:auto;
                    margin-left: 16%;
                    margin-top: 30px;
                    opacity: .4;
                  }
    
                  /* ======================================================================= */
    
                  .section4 .content .card3{
                    width: 33%;
                    height: 100%;
                    }
    
    
    .section4 .content .card3 .top{
        display: flex;
        flex-direction: column;
        gap: 2px;
        color: white;
        text-align: left;
        position: relative;
        margin-top: 100px;
          }
          
    
          .section4 .content .card3 .top h3{
              color: rgb(218, 164, 27); 
              text-align: center;     
              background-color: #555;
              padding: 10px;
              border-radius: 20px; 
              width: fit-content;
              margin-left: 15%;
              font-size: 20px;
      
                }
      
                .section4 .content .card3 .top p{
            font-size: 12px;
          width: 50%;   
          text-align: start;   
          margin-left: 70px;
          opacity: .4;
          }
      
                .section4 .content .card3 .top i{
            position: absolute;
            top:50px;
            left:-8%;
            font-size: 50px;
                border: 2px solid   rgb(128, 128, 128);
                border-radius: 50px;
                font-weight: 100;
                padding: 5px;
                }
      
                .section4 .content .card3 .bottom{
                  display: flex;
                  flex-direction: column;
                  gap: 2px;
                  color: white;
                  text-align: start;
                  position: relative;
                  margin-top: 0px;
                    }
                    
      
                .section4 .content .card3 .bottom h3{
                  color: rgb(218, 164, 27); 
                  text-align: center;     
                  background-color: #555;
                  padding: 10px;
                  border-radius: 20px; 
                  width: fit-content;
                  margin-left: 15%;
                  font-size: 20px;
          
                    }
          
                    .section4 .content .card3 .bottom p{
                font-size: 12px;
              width: 50%;   
              text-align: start;   
              margin-left: 70px;
              opacity: .4;
              color: #fff;
              }
          
                    .section4 .content .card3 .bottom i{
                position: absolute;
                top:50px;
                left:-8%;
                font-size: 50px;
                border: 2px solid   rgb(128, 128, 128);
                border-radius: 50px;
                font-weight: 100;
                padding: 5px;
                    }
    


                    .footer{
                        background:#55555580;
                        padding:30px 0px;
                        font-family: 'Play', sans-serif;
                        text-align:center;
                        }
                        
                        .footer .row{
                        width:100%;
                        margin:1% 0%;
                        padding:0.6% 0%;
                        color:gray;
                        font-size:0.8em;
                        }
                        
                    
                        .footer .row a{
                        text-decoration:none;
                        color:gray;
                        transition:0.5s;
                        font-size: 20px;
                        font-weight: 900;
                        }
                        
                        .footer .row a:hover{
                        color:#fff;
                        }
                        
                        .footer .row ul{
                        width:100%;
                      
                        }
                        
                        .footer .row ul li{
                        display:inline-block;
                        margin:0px 40px;
                        }
                        
                        .footer .row a i{
                        font-size:2.5em;
                        margin:0% 3%;
                        color: #fff;
                        }
                        
                        @media (max-width:720px){
                        .footer{
                        text-align:left;
                        padding:5%;
                        }
                        .footer .row ul li{
                        display:block;
                        margin:10px 0px;
                        text-align:left;
                        }
                        .footer .row a i{
                        margin:0% 3%;
                        }
                        }
                    
                    


                        @media(min-width:768px) and (max-width:1200px){
       
                            body{
                                margin: 0px !important;
                                overflow-y: auto;
                                font-family: 'Poppins', sans-serif;
                                overflow-x: hidden;
                            width: 100% !important;
                            }
                            
                    
                            body, html {
                                margin: 0;
                                padding: 0;
                                width: 100%;
                                overflow-x: hidden; /* Ensures no horizontal scrolling */
                            }
                            
                    
                    
                            * {
                                box-sizing: border-box;
                            }
                            
                    
                    
                            header {
                                position: relative;
                                height: auto; /* Keep header dynamic */
                                overflow: hidden; /* Hide any overflow */
                                overflow: hidden;
                    
                            }
                    
                            nav {
                                overflow: hidden;
                                width: 100%;
                                height: 80px;
                                position: fixed;
                                top: 0;
                                left: 0;
                                z-index: 10;
                                background-color: #333333cc;
                                margin-left: 0;
                                margin-right: 0;
                            }
                            
                            
                            header nav ul {
                                list-style: none;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 50px;
                                padding: 0;
                                margin-left:10%;
                                height: 100%;
                                align-items: center; /* Align items vertically in the nav */
                            }
                            
                            header nav ul li {
                                margin-right: 0px;
                                margin-left: 0px;
                            
                            }
                            
                            header nav ul li a {
                                text-decoration: none;
                                color: #fff;
                                font-family: 'Poppins', sans-serif;
                                font-weight: 600;
                                font-size: 22px;
                                padding: 0 0px;
                            }
                            
                            header nav ul li a:hover {
                                background-color: #555;
                            }
                            
                            header nav ul li img {
                                width: 80px;
                                height: auto;
                                opacity: 1;
                                background-color: #ffffff4f;
                                padding: 10px;
                                border-radius: 10px;
                                margin-top: 10px;
                            }
                            
                            header .slider {
                                overflow: hidden;
                                width: 100%;
                                margin-top: 0px;
                            }
                            
                            header .slider-inner {
                                display: flex;
                                transition: transform 0.5s ease-in-out;
                            }
                            
                            header .slider-inner .slide {
                                min-width: 100%;
                                box-sizing: border-box;
                                position: relative;
                                height: 600px;
                            }
                            
                             
                            header .slider-inner .slide img {
                                width: 100%;
                                height: 80%;
                                opacity: .6;
                            }
                            
                            .slide h1 {
                                position: absolute;
                            top: 30%;
                            left: 25%;
                            font-size: 40px;
                                color: white;
                                text-transform: uppercase;
                                font-family: 'Poppins', sans-serif;
                            background-color: #55555575;
                                padding: 20px;
                            border-radius: 30px;
                            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
                            border-radius: 10px;}
                            
                    
                    
                    /* ================================================================================================================================== */
                        .section2{
                            padding: 100px 70px;
                            overflow-x: hidden;
                        }
                        
                        .section2 h1{
                            margin-left: 38%;
                            color: #fff;
                            font-size: 47px;
                            color: rgb(218, 164, 27);
                        }
                        
                        .section2 hr{
                            width: 29%;
                            padding: 3px;
                            border: none;
                            border-radius: 10px;
                            background-color:  rgba(128,128,128);
                            margin-left: 36%;
                            box-shadow: rgba(128,128,128, .4) 5px 5px, rgba(128,128,128, .3) 10px 10px, rgba(128, 128, 128,.2) 15px 15px, rgba(128, 128, 128,.1) 20px 20px, rgba(128, 128, 128, .05)  25px 25px;
                    
                        }
                        


                        .section2 .content{
                            display: flex;
                            flex-direction: row;
                            display: flex;
                            gap: 50px;
                            flex-wrap: wrap;
                            margin-top: 100px;
                            justify-content: center;
                        }  
                    
                       
                        .section2 .content h1{
                            margin-left: 0%;
                            background-color: #555;
                            padding: 10px;
                            border-radius: 20px;
                            font-family: "Playwrite CU", cursive;
                    
                        }
                    
                        .section2 .content h3{
                            margin-left: 0%;
                            background-color: #5555558e;
                            padding: 10px;
                            border-radius: 20px;
                            color: rgb(218, 164, 27);
                            font-size: 30px;
                        }
                        
                        .section2 .content .partion{
                            display: flex;
                            flex-direction: row;
                            display: flex;
                            gap: 20px;
                            flex-wrap: wrap;
                            margin-top: 30px;
                            justify-content: center;
                        }
                        
                        .section2 .content .commercial{
                            display: flex;
                        flex-direction: row;
                        display: flex;
                        gap: 10px;
                        flex-wrap: wrap;
                        margin-top: 10px;
                        justify-content: center;
                    }
                    
                    .section2 .content .commerical h3{
                        width: fit-content;
                        margin-left: 18%;
                        background-color: #18191b;
                    }
                    
                    .section2 .content .commercial .cards .card{
                        
                    width:100%;
                 
                    
                    }
                          
                    .section2 .content .commercial .cards{
                        
                        display: flex;
                    justify-content: center;
                    width:100%;
                    display: flex;
                    flex-direction: column;
                    height: auto;
                    border-radius:  10px 10px 20px 20px;
                    padding-bottom: 50px;
                    
                    }
                    
                    
                    
                    
                  
                    
                        .section2 .content .card{
                            display: flex;
                            flex-direction: column;
                            gap: 20px;
                            width: 40%;
                            height: auto;
                            border-radius:  10px 10px 20px 20px;
                            padding-bottom: 50px;
                        }
                        
                    
                         
                        .section2 .content .card .top {
                            width: 100%;
                            position: relative;
                        }
                    
                    
                        .section2 .content .card .top img{
                            width: 100%;
                            height: 280px;
                            border-radius:  20px 20px 60px  60px;
                            opacity: .5;
                    
                             }
                    
                             .section2 .content .card .top h2{
                               width: 100%;
                               background-color: #555555af;
                               font-size: 34px;
                        position: absolute;
                        top: 50%;
                        left: 0px;
                    text-align: center;
                    margin-left: 0px;
                        transform: translateY(-50%);
                        color: white;
                                 }
                    
                                 .section2 .content .card .top a{
                                    position: absolute;
                                    left: 50%;
                                    top: 250px;
                                    transform: translateX(-50%);
                    text-decoration: none;
                    color: black;
                    padding: 10px;
                    font-size: 16px;
                    background-color: rgb(218, 164, 27);
                    border-radius: 20px;
                    font-weight: 800;
                    opacity: .8;
                    font-family: "Playwrite CU", cursive;
                                }
                    
                        
                    
                                 .section2 .content hr{
                                    background-color: rgb(218, 164, 27);
                                    background-color: rgb(128, 128, 128);
                                opacity: .4;
                                    width: 80%;
                                    margin-left: 10%;
                                    /* box-shadow: rgba(218, 164, 27,.4) 5px 5px, rgba(218, 164, 27,.3) 10px 10px, rgba(218, 164, 27,.2) 15px 15px, rgba(218, 164, 27,.1) 20px 20px, rgba(218, 164, 27, .05)  25px 25px; */
                                    box-shadow: rgba(128, 128, 128,.4) 5px 5px, rgba(128, 128, 128,.3) 10px 10px, rgba(128, 128, 128, .2) 15px 15px, rgba(128, 128, 128,.1) 20px 20px, rgba(128, 128, 128, .05)  25px 25px;
                                 }
                    
                    
                                 
                    @keyframes scroll {
                        0% {
                            transform: translateX(0);
                        }
                        100% {
                            transform: translateX(-50%);
                        }
                    }
                    
         
                    
                    
                    /* ========================================================================================================== */
                    
                    
                    
                    .footer{
                        background:#55555580;
                        padding:30px 0px;
                        font-family: 'Play', sans-serif;
                        text-align:center;
                        }
                        
                        .footer .row{
                        width:100%;
                        margin:1% 0%;
                        padding:0.6% 0%;
                        color:gray;
                        font-size:0.8em;
                        }
                        
                    
                        .footer .row a{
                        text-decoration:none;
                        color:gray;
                        transition:0.5s;
                        font-size: 20px;
                        font-weight: 900;
                        }
                        
                        .footer .row a:hover{
                        color:#fff;
                        }
                        
                        .footer .row ul{
                        width:100%;
                        display: flex;
                        flex-direction: row;
                        gap: 20px;
                        }
                        
                        .footer .row ul li{
                        display:inline-block;
                        margin:0px 30px;
                        align-items: center;
                        }
                        
                        .footer .row a i{
                        font-size:4em;
                        margin:0% 1%;
                        color: #fff;
                        align-items: center;

                        }
                        
                        .footer{
                        text-align:left;
                        padding:5%;
                        }
                        .footer .row ul li{
                        display:block;
                        margin:0px 0px;
                        font-size:4em;
                        text-align:center;
                        }
                        .footer .row a i{
                            font-size:4em;
                        margin:0% 3%;
                        }
                        
                    
                    
                    
                    
                    

                    }
                

                    @media(min-width:480px) and (max-width:768px){
       
                        body{
                            margin: 0px !important;
                            overflow-y: auto;
                            font-family: 'Poppins', sans-serif;
                            overflow-x: hidden;
                        width: 100% !important;
                        }
                        
                
                        body, html {
                            margin: 0;
                            padding: 0;
                            width: 100%;
                            overflow-x: hidden; /* Ensures no horizontal scrolling */
                        }
                        
                
                
                        * {
                            box-sizing: border-box;
                        }
                        
                
                
                        header {
                            position: relative;
                            height: auto; /* Keep header dynamic */
                            overflow: hidden; /* Hide any overflow */
                            overflow: hidden;
                
                        }
                
                        nav {
                            overflow: hidden;
                            width: 100%;
                            height: 80px;
                            position: fixed;
                            top: 0;
                            left: 0;
                            z-index: 10;
                            background-color: #333333cc;
                            margin-left: 0;
                            margin-right: 0;
                        }
                        
                        
                        header nav ul {
                            list-style: none;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 30px;
                            padding: 0;
                            margin-left:18%;
                            height: 100%;
                            align-items: center; /* Align items vertically in the nav */
                        }
                        
                        header nav ul li {
                            margin-right: 0px;
                            margin-left: 0px;
                        
                        }
                        
                        header nav ul li a {
                            text-decoration: none;
                            color: #fff;
                            font-family: 'Poppins', sans-serif;
                            font-weight: 600;
                            font-size: 16px;
                            padding: 0 0px;
                        }
                        
                        header nav ul li a:hover {
                            background-color: #555;
                        }
                        
                        header nav ul li img {
                            width: 80px;
                            height: auto;
                            opacity: 1;
                            background-color: #ffffff4f;
                            padding: 10px;
                            border-radius: 10px;
                            margin-top: 10px;
                        }
                        
                        header .slider {
                            overflow: hidden;
                            width: 100%;
                            margin-top: 0px;
                        }
                        
                        header .slider-inner {
                            display: flex;
                            transition: transform 0.5s ease-in-out;
                        }
                        
                        header .slider-inner .slide {
                            min-width: 100%;
                            box-sizing: border-box;
                            position: relative;
                            height: 600px;
                        }
                        
                         
                        header .slider-inner .slide img {
                            width: 100%;
                            height: 60%;
                            opacity: .6;
                        }
                        
                        .slide h1 {
                            position: absolute;
                        top: 30%;
                        left: 25%;
                        font-size: 26px;
                            color: white;
                            text-transform: uppercase;
                            font-family: 'Poppins', sans-serif;
                        background-color: #55555575;
                            padding: 20px;
                        border-radius: 30px;
                        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
                        border-radius: 10px;}
                        
 
                
                /* ================================================================================================================================== */
                    .section2{
                        padding: 100px 70px;
                        overflow-x: hidden;
                    }
                    
                    .section2 h1{
                        margin-left: 28%;
                        color: #fff;
                        font-size: 47px;
                        color: rgb(218, 164, 27);
                    }
                    
                    .section2 hr{
                        width: 38%;
                        padding: 3px;
                        border: none;
                        border-radius: 10px;
                        background-color:  rgba(128,128,128);
                        margin-left: 30%;
                        box-shadow: rgba(128,128,128, .4) 5px 5px, rgba(128,128,128, .3) 10px 10px, rgba(128, 128, 128,.2) 15px 15px, rgba(128, 128, 128,.1) 20px 20px, rgba(128, 128, 128, .05)  25px 25px;
                
                    }
                    


                    .section2 .content{
                        display: flex;
                        flex-direction: row;
                        display: flex;
                        gap: 50px;
                        flex-wrap: wrap;
                        margin-top: 100px;
                        justify-content: center;
                    }  
                
                   
                    .section2 .content h1{
                        margin-left: 0%;
                        background-color: #555;
                        padding: 10px;
                        border-radius: 20px;
                        font-family: "Playwrite CU", cursive;
                
                    }
                
                    .section2 .content h3{
                        margin-left: 0%;
                        background-color: #5555558e;
                        padding: 10px;
                        border-radius: 20px;
                        color: rgb(218, 164, 27);
                        font-size: 30px;
                    }
                    
                    .section2 .content .partion{
                        display: flex;
                        flex-direction: row;
                        display: flex;
                        gap: 20px;
                        flex-wrap: wrap;
                        margin-top: 30px;
                        justify-content: center;
                    }
                    
                    .section2 .content .commercial{
                        display: flex;
                    flex-direction: row;
                    display: flex;
                    gap: 10px;
                    flex-wrap: wrap;
                    margin-top: 10px;
                    justify-content: center;
                }
                
                .section2 .content .commerical h3{
                    width: fit-content;
                    margin-left: 18%;
                    background-color: #18191b;
                }
                
                .section2 .content .commercial .cards .card{
                    
                width:100%;
             
                
                }
                      
                .section2 .content .commercial .cards{
                    
                    display: flex;
                justify-content: center;
                width:100%;
                display: flex;
                flex-direction: column;
                height: auto;
                border-radius:  10px 10px 20px 20px;
                padding-bottom: 50px;
                
                }
                
                
                
                
              
                
                    .section2 .content .card{
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                        width: 75%;
                        height: auto;
                        border-radius:  10px 10px 20px 20px;
                        padding-bottom: 50px;
                    }
                    
                
                     
                    .section2 .content .card .top {
                        width: 100%;
                        position: relative;
                    }
                
                
                    .section2 .content .card .top img{
                        width: 100%;
                        height: 280px;
                        border-radius:  20px 20px 60px  60px;
                        opacity: .5;
                
                         }
                
                         .section2 .content .card .top h2{
                           width: 100%;
                           background-color: #555555af;
                           font-size: 34px;
                    position: absolute;
                    top: 50%;
                    left: 0px;
                text-align: center;
                margin-left: 0px;
                    transform: translateY(-50%);
                    color: white;
                             }
                
                             .section2 .content .card .top a{
                                position: absolute;
                                left: 50%;
                                top: 250px;
                                transform: translateX(-50%);
                text-decoration: none;
                color: black;
                padding: 10px;
                font-size: 16px;
                background-color: rgb(218, 164, 27);
                border-radius: 20px;
                font-weight: 800;
                opacity: .8;
                font-family: "Playwrite CU", cursive;
                            }
                
                    
                
                             .section2 .content hr{
                                background-color: rgb(218, 164, 27);
                                background-color: rgb(128, 128, 128);
                            opacity: .4;
                                width: 80%;
                                margin-left: 10%;
                                /* box-shadow: rgba(218, 164, 27,.4) 5px 5px, rgba(218, 164, 27,.3) 10px 10px, rgba(218, 164, 27,.2) 15px 15px, rgba(218, 164, 27,.1) 20px 20px, rgba(218, 164, 27, .05)  25px 25px; */
                                box-shadow: rgba(128, 128, 128,.4) 5px 5px, rgba(128, 128, 128,.3) 10px 10px, rgba(128, 128, 128, .2) 15px 15px, rgba(128, 128, 128,.1) 20px 20px, rgba(128, 128, 128, .05)  25px 25px;
                             }
                
                
                             
                @keyframes scroll {
                    0% {
                        transform: translateX(0);
                    }
                    100% {
                        transform: translateX(-50%);
                    }
                }
 
                    
                
                
                
                
                /* ========================================================================================================== */
                
                
                
                .footer{
                    background:#55555580;
                    padding:30px 0px;
                    font-family: 'Play', sans-serif;
                    text-align:center;
                    }
                    
                    .footer .row{
                    width:100%;
                    margin:1% 0%;
                    padding:0.6% 0%;
                    color:gray;
                    font-size:0.8em;
                    }
                    
                
                    .footer .row a{
                    text-decoration:none;
                    color:gray;
                    transition:0.5s;
                    font-size: 20px;
                    font-weight: 900;
                    }
                    
                    .footer .row a:hover{
                    color:#fff;
                    }
                    
                    .footer .row ul{
                    width:100%;
                    }
                    
                    .footer .row ul li{
                    display:inline-block;
                    margin:0px 30px;
                    }
                    
                    .footer .row a i{
                    font-size:2em;
                    margin:0% 1%;
                    color: #fff;
                    }
                    
                    .footer{
                    text-align:left;
                    padding:5%;
                    }
                    .footer .row ul li{
                    display:block;
                    margin:10px 0px;
                    text-align:left;
                    }
                    .footer .row a i{
                    margin:0% 3%;
                    }
                
                
                }
            
    @media(min-width:300px) and (max-width:480px){
       
        body{
            margin: 0px !important;
            overflow-y: auto;
            font-family: 'Poppins', sans-serif;
            overflow-x: hidden;
        width: 100% !important;
        }
        

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            overflow-x: hidden; /* Ensures no horizontal scrolling */
        }
        


        * {
            box-sizing: border-box;
        }
        


        header {
            position: relative;
            height: auto; /* Keep header dynamic */
            overflow: hidden; /* Hide any overflow */
            overflow: hidden;

        }

        nav {
            overflow: hidden;
            width: 100%;
            height: 55px;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10;
            background-color: #333333cc;
            margin-left: 0;
            margin-right: 0;
        }
        
        
        header nav ul {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            padding: 0;
            margin-left:%;
            height: 100%;
            align-items: center; /* Align items vertically in the nav */
            margin-left: 4%;
        }
        
        header nav ul li {
            margin-right: 0px;
            margin-left: 0px;
        
        }
        
        header nav ul li a {
            text-decoration: none;
            color: #fff;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            font-size: 12px;
            padding: 0 0px;
        }
        
        header nav ul li a:hover {
            background-color: #555;
        }
        
        header nav ul li img {
            width: 56px;
            height: auto;
            opacity: 1;
            background-color: #ffffff4f;
            padding: 10px;
            border-radius: 10px;
            margin-top: 10px;
        }
        
        header .slider {
            overflow: hidden;
            width: 100%;
            margin-top: 0px;
        }
        
        header .slider-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        
        header .slider-inner .slide {
            min-width: 100%;
            box-sizing: border-box;
            position: relative;
            height: 600px;
        }
        
         
        header .slider-inner .slide img {
            width: 100%;
            height: 50%;
            opacity: .6;
        }
        
        .slide h1 {
            position: absolute;
        top: 20%;
        left: 25%;
        font-size: 20px;
            color: white;
            text-transform: uppercase;
            font-family: 'Poppins', sans-serif;
        background-color: #55555575;
            padding: 20px;
        border-radius: 30px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        
        border-radius: 10px;}
        



/* ================================================================================================================================== */
    .section2{
        padding: 0px 40px;
        overflow-x: hidden;
    }
    
    .section2 h1{
        margin-left: 22%;
        color: #fff;
        font-size: 40px;
        color: rgb(218, 164, 27);
    }
    
    .section2 hr{
        width: 47%;
        padding: 3px;
        border: none;
        border-radius: 10px;
        background-color:  rgba(128,128,128);
        margin-left: 25%;
        box-shadow: rgba(128,128,128, .4) 5px 5px, rgba(128,128,128, .3) 10px 10px, rgba(128, 128, 128,.2) 15px 15px, rgba(128, 128, 128,.1) 20px 20px, rgba(128, 128, 128, .05)  25px 25px;

    }
    
    .section2 .content{
        display: flex;
        flex-direction: row;
        display: flex;
        gap: 50px;
        flex-wrap: wrap;
        margin-top: 100px;
        justify-content: center;
    }  

   

    
    .section2 .content .partion{
        display: flex;
        flex-direction: row;
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 10px;
        justify-content: center;
    }
    
    .section2 .content .commercial{
        display: flex;
    flex-direction: column;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
    justify-content: center;
}

.section2 .content .commerical h3{
    width: fit-content;
    margin-left: 18%;
    background-color: #18191b;
}

.section2 .content .commercial .cards{
    
    display: flex;
justify-content: center;
width: 130%;
display: flex;
flex-direction: column;
height: auto;
border-radius:  10px 10px 20px 20px;
padding-bottom: 50px;

}




    .section2 .content h1{
        margin-left: 0%;
        background-color: #555;
        padding: 10px;
        border-radius: 20px;
        font-family: "Playwrite CU", cursive;

    }

    .section2 .content h3{
        margin-left: 0%;
        background-color: #5555558e;
        padding: 10px;
        border-radius: 20px;
        color: rgb(218, 164, 27);
        font-size: 30px;
    }

    .section2 .content .card{
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        height: auto;
        border-radius:  10px 10px 20px 20px;
        padding-bottom: 50px;
    }
    

     
    .section2 .content .card .top {
        width: 100%;
        position: relative;
    }


    .section2 .content .card .top img{
        width: 100%;
        height: 280px;
        border-radius:  20px 20px 60px  60px;
        opacity: .5;

         }

         .section2 .content .card .top h2{
           width: 100%;
           background-color: #555555af;
           font-size: 34px;
    position: absolute;
    top: 50%;
    left: 0px;
text-align: center;
margin-left: 0px;
    transform: translateY(-50%);
    color: white;
             }

             .section2 .content .card .top a{
                position: absolute;
                left: 50%;
                top: 250px;
                transform: translateX(-50%);
text-decoration: none;
color: black;
padding: 10px;
font-size: 16px;
background-color: rgb(218, 164, 27);
border-radius: 20px;
font-weight: 800;
opacity: .8;
font-family: "Playwrite CU", cursive;
            }

    

             .section2 .content hr{
                background-color: rgb(218, 164, 27);
                background-color: rgb(128, 128, 128);
            opacity: .4;
                width: 80%;
                margin-left: 10%;
                /* box-shadow: rgba(218, 164, 27,.4) 5px 5px, rgba(218, 164, 27,.3) 10px 10px, rgba(218, 164, 27,.2) 15px 15px, rgba(218, 164, 27,.1) 20px 20px, rgba(218, 164, 27, .05)  25px 25px; */
                box-shadow: rgba(128, 128, 128,.4) 5px 5px, rgba(128, 128, 128,.3) 10px 10px, rgba(128, 128, 128, .2) 15px 15px, rgba(128, 128, 128,.1) 20px 20px, rgba(128, 128, 128, .05)  25px 25px;
             }


             
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}





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



.footer{
    background:#55555580;
    padding:30px 0px;
    font-family: 'Play', sans-serif;
    text-align:center;
    }
    
    .footer .row{
    width:100%;
    margin:1% 0%;
    padding:0.6% 0%;
    color:gray;
    font-size:0.8em;
    }
    

    .footer .row a{
    text-decoration:none;
    color:gray;
    transition:0.5s;
    font-size: 20px;
    font-weight: 900;
    }
    
    .footer .row a:hover{
    color:#fff;
    }
    
    .footer .row ul{
    width:100%;
    }
    
    .footer .row ul li{
    display:inline-block;
    margin:0px 30px;
    }
    
    .footer .row a i{
    font-size:2em;
    margin:0% 1%;
    color: #fff;
    }
    
    .footer{
    text-align:left;
    padding:5%;
    }
    .footer .row ul li{
    display:block;
    margin:10px 0px;
    text-align:left;
    }
    .footer .row a i{
    margin:0% 3%;
    }
    







}