/*from big tablets to 1200px widths smaller than pixel row*/


@media only screen and (max-width:1200px){
     .ujima-text-box{
   
    width:100%;
         padding-left: 1em;
    }
    
 
    
 
        /*grid-template-rows:300px;*/
    
    
    .main-text{
        column-count: 3;
    }
}   



  /* Base styling for all parts */
.fawohodie-part-1,
.fawohodie-part-2,
.fawohodie-part-3 {
  stroke: #000;           /* Default stroke color */
  fill: none;             /* No fill by default */
  stroke-width: 27px;     /* Consistent line thickness */
  transition: all 0.3s ease; /* Smooth hover/toggle effects */
}

/* Example stroke changes */
.fawohodie-part-1 { stroke: #222; }  /* Outer outline */
.fawohodie-part-2 { stroke: #444; }  /* Inner top X */
.fawohodie-part-3 { stroke: #666; }  /* Bottom chevron */

/* Example fill overrides (if you ever want filled version) */
.fawohodie-part-1.filled { fill: #ffcc00; }
.fawohodie-part-2.filled { fill: #ff6600; }
.fawohodie-part-3.filled { fill: #cc0000; }

/* Toggle or hover example */
#fawohodoo-toggle.open .fawohodie-part-1 {
  stroke: red; 
}
#fawohodoo-toggle.open .fawohodie-part-2 {
  stroke: orange;
}
#fawohodoo-toggle.open .fawohodie-part-3 {
  stroke: green;
}

/* Optional hover effect */
#fawohodoo-toggle:hover .fawohodie-part-1 {
  stroke: blue;
}


  

  /* mpatapo css */




.mpatapo-menu {
  width: 60px;            /* Adjust to preferred size */
  height: auto;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.mpatapo-menu:hover {
  transform: scale(1.1);
}

.mpatapo-menu svg {
  width: 100%;
  height: auto;
  fill: #ff4500;          /* Change color as needed */
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
  transition: fill 0.3s ease, transform 0.3s ease;
}

.mpatapo-menu svg:hover {
  fill: #ff7700;
  transform: rotate(5deg);
}


 .mpatapo-menu svg path {
  fill: #ff4500; /* or whatever color you want */
}
 




    
    




                         /*--putting Store grid in comments--*/












                          /*small tablet to big tablet from 768px to 1023*/
@media only screen and (min-width:1023px){
   
        .ujima-text-box{
         width:100%;
         padding-left: 1em;
    }
    
    
    
        .header{
            width:100%;
            background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(sun540792355.jpg);
            height:100vh;
            background-size:cover;
            background-position: center;
            background-attachment: fixed;

            }


    
    .about-box>p{
        object-position: center
              
    }
    
    .ico-text{
      text-align: center;
        margin:0 auto ;
        width: auto;
    }
       /*flexible blog layout*/
    

    
    
    
.main-text {
    grid-column: 1 / -1;
    font-size: 16px;
    color: #40200a;
    background-color: #FEF5E7;
    padding: 1em;
    line-height: 1.5;
    width: 100%;
    
    column-count: 2;
    column-gap: 2em;
    
    /* Prevent shrinking */
    min-width: 0;
}

    
.other-blogs{
    font-size:80%;
    background-color:#FEF9E7;
    grid-column-start:1;
    grid-column-end:12;
    grid-row-start: 8;
    grid-row-end:12;
 
    
        
    }  
    
    
    
    
    
    
    
        }

   
                /**/

      
      
              /**/

    
  




                                 /*Small phones to tablets and 
                                I pad in land scape view,481px to 767px*/
/* Hide sticky nav on tablets & mobile */
@media screen and (max-width: 768px) {
  .sticky,.header-ico{
    display: none !important;
  }



}

/* ✅ Sliding Mobile Menu */
 

  /* ✅ Hide Normal Nav on Small Screens */




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

    .row{max-width:766px}


    .blog-container p{padding-left: 1.5em;}
    .blog-container p{padding-right: 1.5em;}
    
    .blog-container{width: 100%;}
   
       
    
     .about-wrap>div{
           display: flex;
           flex-direction: column;
           flex-basis: auto;
           justify-content: space-between;
        
           }
    
    
           
       text-align: center;
        margin:0 auto ;
        width: auto;
    }

    
    
    main-text{
        column-count: 2;
    }
  
    
     .main-text{
        column-count: 1;
         padding-left: 2em;
         padding-right: 2em;
         width: auto;
    }
    

    .ico-text{margin-top: 1em;
    padding:1em;}  

 


                                           /*Small phones from 0 to 480px*/

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


    
 

/*--header-ico--*/
    

.logo-anim-wrapper {
  width: 72px;
  height: 72px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-anim-symbol {
  position: absolute;
  left: 0; top: 0;
  width: 72px;
  height: 72px;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 2.8s cubic-bezier(.77,0,.175,1), transform 2.8s cubic-bezier(.77,0,.175,1);
  will-change: opacity, transform;
}
.logo-anim-symbol.nteasee {
  opacity: 1;
  animation: nteasee-pulse 6s ease-in-out infinite;
  z-index: 1;
}
.logo-anim-symbol.boame {
  opacity: 0;
  animation: boame-pulse 6s ease-in-out infinite;
  z-index: 2;
}
@keyframes nteasee-pulse {
  0%, 100% { opacity: 1; transform: scale(0.92); }
  40% { opacity: 0.7; transform: scale(1.04); }
  60% { opacity: 1; transform: scale(0.98); }
}
@keyframes boame-pulse {
  0%, 100% { opacity: 0; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.04); }
}

 
  /*--Text--*/
    
    
    
    .banner-text-1{
        font-size: 120%;
    }
    
    
    
    
      /*--header--*/
    
    .header{
    background-image:linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(sun540792355.jpg);
    height:100vh;
       
    background-size:cover;
    background-position: center;
    background-attachment: fixed;
    display: block;
    
    }
    
    .main-text{
        column-count: 1;
    }
    
 
    
    
    
.ico-text{display: block;
          margin-top: 2em;
          text-align:center;
          font-size:75%;
          margin:0 auto;
          width: auto;
          font-size:70%;
          color:#D35400;
          }

        
    
    .about-ico{
        display: inline-block;
        margin-left:-190px;
          
    }

    .about-box{
        margin: auto;
    }

   .icon-boa-me-plain about-ico{
       margin-bottom: 5em;
   }

    .about-wrap>div{
        display: flex;
        flex-direction: column;
        flex-basis: auto;
        justify-content: space-between;
     
        }


    
    
  
    
    .ico-text p{
        
        align-content: center;
    }
 
   /*--blog container--*/

   .blog-container{
    display:grid; 
    box-sizing: border-box;
    padding-left: .5em;
    padding-right: .5em;
   }

   .main-text{
       padding:5px;
   }
   
 

    P{
        padding-left: 2em;
        padding-right: 2em;
    }
    .other-blogs{
        padding-left: auto;
        padding-right: auto;
    }
        
    

 
 
.row{max-width: 100%;}
 
 h1{margin:0;
    color:#D35400;
    font-size:50%;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 4px;
    margin-bottom: 50px; 
}
 

 
 .about-section{display: flex;
     flex-flow: column;
     justify-content: center;
     align-content: center;


}

#about .row {
  width: 90%;
  max-width: none;
}
   

}


                      /*--Dash board set up user back end--*/
 @media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-title {
        font-size: 1.8rem;
    }
}

/* Morph Logo Animation for Index Page */