@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Forum&display=swap');


*   {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: clip;
    }


html {
    scroll-behavior: smooth;
    overflow-x: hidden;
     }


body {

    font-family: "Founders Grotesk", sans-serif;
  <!-- font-family: "Inter", sans-serif;
    font-family: 'spectral', serif;-->
    color: #2c2c2b;
    overflow-x: hidden;
     }


a    {
    text-decoration: none;
    color: #494949;
   <!-- -webkit-tap-highlight-color: transparent; -->
     }
<!--
a:focus,
a:active    {
    background: transparent;
    outline: none;
     }
-->
p    {
    margin-bottom: 7px;
   

     }


.container {
     max-width: 100%;
     margin: auto;
      }


.header {

     width: 90%;
     margin-bottom: 20px;
     position: relative;
     right:0;
     top: 0;

     }


nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding-right: 5px;
    padding-left: 5px;
    width: 100%;
    padding-bottom: 4px;
    padding-top: 4px;
   
    }

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

.menus li a {
     margin-right: 40px;
     color: #2c2c2b;
    display: flex;
    align-items: center;
    justify-content: space-between;
     

}

.log {
width:200px;

}

.menu {
    display: flex;
    list-style: none;
    gap: 8px;
    align-items: center;
    font-size: 15px;
    margin-right: 10%;
}


.menu li a {
    color: white;
    padding-right: 10px;
}

.menu li a:hover, .active {
    color: rgb(148, 136, 140);
}

.menu img {
display: none;
    
}

.menu h1 {
    color: white;
    font-size: 2 rem;

}

.menubars {
    display: flex;
    margin-right: 5px;
    color: rgb(43, 42, 42);
    
}

.menubars div {

    color: #494949;
    font-size: 20px;
    background-color: white;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
}


.menuba div {

    color: #494949;
    font-size: 20px;
    background-color: white;
    border-radius: 50%;
    border-color: gref;
    height: 50px;
    width: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
}

.bars h1 {
    text-align: start;
}


.menubars img {

    width: 32px;
    margin-right: 10px;
}
.opini {

    text-align: start;
    margin-left: 10%;
}

.body {

    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px;
}
.politi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5px;
    row-gap: 5px;
   
}

.politis {
    display: grid;
    grid-template-columns: 1fr 1fr  1fr;
    column-gap: 30px;
    row-gap: 40px;
    

}

.float {

    display: grid;
    grid-template-columns: 1fr;
    gap: 17px;
    
   }


.store {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 25px;
}

.sizebar ul {
padding: 10px 0;

}

.sizebar ul li a {
    margin: 20px 0;
}

.size {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.sample {

    margin-bottom: 5px;
    
}

.sample img {
    width: 100%;
    margin-top: 20px;
    aspect-ratio: 16/11;
    object-fit: cover;
}

.sample h1, h3, p {

    margin-bottom: 10px;
}

#main {

    width: 100%;
}

#main .container .logo {
color: var(--wc-red)
}

.nav-lists {
display:flex;
align-items: center;
list-style: none;
gap: 30px;
 }

 .politic {   
   padding-top: 30px;
 }

 .btn {
    padding: 5px 3px;
    background-color: var(--wc-red);
    color: #efefef;
    cursor: pointer;
    font-weight: bold;
    border: 1px solid var(--primary);
    border-radius: 3px;
    font-size: 13px;
    margin-bottom: 20px;

}

.btn-secondary {
    background-color: rgb(133, 130, 130);
    color: white;
    margin-top: 16px;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: rgb(167, 160, 163);
    color: #efefef;
}

article img {

float: left; 
width: 100px; 
height: auto;
margin: 0 20px 10px 0;
}



.exam h1 {

    padding-bottom: 30px;
    text-align: left;
}

.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main h1 {
    font-size: 30px;
}

.main h2 {

    font-size: 20px;
    padding-top: 20px;
}

.container .heading {
    font-size: 20px;
    color: var(--primary);
    text-align: center;
    margin-bottom: 30px;
}

 #calls {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
 }
  
#calls .call {
flex-basis: 32%;
}

#calls .call img {
width: 100%; 
border-radius: 10px; 
}
section {
   width: 90%; 
   margin: auto;
   padding-top: 20px;
   border-bottom-width: 2px solid gray;
}


.flext {
  display: flex;
  flex-wrap: wrap;
  gap: 17px;
  margin-top: 10px;
  justify-content: center

}

.mu {
    flex-basis: 30%;
}
.myimg {
    width: 100%;
    margin-bottom: 20px;
}

.gala {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}

.pics {
flex-basis: 32%

}

.detail {
    width: 80%;
    padding: ;

    margin:auto;

}
.sam {

    width: 100%;
    text-align: start;
}

.ded {
    width: 300px;
}

.btn-secondary a {
color: white;

}

.ded img {
    width: 100%;
}

.pics img {
    width: 100%;
    
}

.exam {
    text-align: center;
}

p {
 padding-bottom: 10px;
 line-height: 25px;
}

.exam h1 {
    font-size: 32px;
}

.exam p {
     text-align: start;
}


.about {
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
    gap: 10px;
}

.content-width {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.about-img {
    flex-basis: 43%;
    
}

.about-img img{
    width: 100%;
}

.btn {
    width: 100px;
    border: none;
}

footer {

    padding: 20px;
    background-color: grey;

}

footer div {
    display: flex;
    justify-content: center;
    align-items: center;

}


#materialIcons {

    position: fixed;
    bottom: 0.9rem;
    right: 0.5rem;
    font-size: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(223, 219, 219);
    color: rgb(126, 124, 124);
    border-radius: 50%;
    height: 40px;
    width: 40px;
    text-decoration: none;
    transition: 0.2s ease-out;
    padding: 2px;
    
    

}


.select {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    flex-wrap: wrap;
    color: white;
    
}

.select ul {
    margin: 17px;
    max-width: 500px;
}


.select ul li {
  list-style: none;
  margin-bottom: 7px;
  color: var(--wc-content-bg)
}


footer p {
    color: rgb(43, 43, 42);
    border-right-width : 1px solid rgb(241, 238, 231);

}


.flexss {
    height: 30px;  
    
}

.social-media {

    display: flex;
    gap: 10px;
    padding-left: 0;
    justify-content: start;
    align-items: start;
}
.social-media li a img {

    width: 35px;
    box-shadow:none;
}

.sumits {
padding-top: 20px;
padding-left: 20px;
width: 100%;
padding-bottom: 20px;
}

.sumit {

    width: 100%;
}

.sideopinion {
padding-top: 20px;
padding-left: 30px;
}

.social-media li a {
    font-family: none;
}

.menbar {

    font-size: 40px;
    color: white
}
.menubars {

    display: none;
   }

   .sample hr {

    display: none;
   }

 .exam {

    border-width: 1px solid black;
 }

 .aboutme img {

  width: 250px;

 }

 .aboutme h1 {

    margin-bottom: 10px;
 }

 .bor {
    width: 100%;
    height: 30px;
    background-color: rgb(238, 235, 235);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
    padding: 17px 0;
 }

.bors {
    width: 100%;
    height: 5px;
    background-color: rgb(238, 235, 235);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(0, 0, 0);
    padding: 17px 0;
 }

 
 .h11 {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 5px;
    color: #515151;
    
 }

 .last {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 }

  .horiz {
    margin-top: -20px;
    width: 950px;
    overflow-x: scroll;
    margin: auto;
    background-color: rgb(248, 244, 244);
  }

  .horiz h3 {

    padding-bottom: 40px;
  }


  .headin {

    display: flex;
    align-items: start;
    justify-content: start;
    padding-top: 40px;
    padding-left: 110px;
  }

  .op {

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 17px;
  }
 
  .op h4, .op h3 {
    margin-bottom: 10px;

  }

  .floa {
 width: 150px; float: left; margin-right: 25px; margin-bottom: 25px;    aspect-ratio: 9/16;
    object-fit: cover;
  }

 

 .gallery {

    width: 90%;
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 20px;
    margin-left: 50px;
    padding-top: 40px;
    padding-bottom: 30px;

 }
  

 .gallery img {
    height: 250px;
    width: 300px;
 }

 .align {

    width: 80%;
    margin: auto;
    padding-top: 30px;
 }

 .align img {

    float: right;
    margin-left: 10px;
    margin-bottom: 5px;

 }


 .plau {
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
 }

  .plau a {

    color: black;
    padding: 8px 15px;
    display: inline-block;
    background-color: #8d9686;
    border-radius: 5px;

  }

  .plau a.active{
    background-color: #7ad03a;
    color: var(--white);
  }
  
  .bars {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .bars img {

    color: white;
  }
  details summary {

    color: #7ad03a;
    padding: 10px 10px;
  }

  .ppp {
   display: none ;
   padding-top: 20px;
    
  }

  .sam label {
    padding-bottom: 30px;
  }

  .sam label::before {

        content: "+";
        margin-right: 20px;
    }

  input {
    display: none;
  }

  #bar:checked ~ menu {

    right: 0;

  }

    input:checked + .sam label::before {

        content: "-";

    }

    input:checked ~ .ppp {

    display: block;
  }

  .list {

    display: none;
  }

   .input-radio:checked ~ .list {

    display: block;
   }


   .footer-info {

    display: grid;
    
    gap: 20px;
    margin-bottom: 30px;
    width: 90%;
   }

   .footer-info div {

    display: grid;
    grid-template-columns: ;
    margin-top: 20px;
    gap: 7px;
    
   }

   .footer-info ul li {
    list-style: none;
    margin: 10px 0;

   }

   .footer-info ul li a {

    color: #494949;


   }

   .footer-info img {

    width: 250px;
    margin-bottom: 20px;
   }

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

    display: grid;
    gap: 10px;
    position: relative;

    
     }

   .gris {

    display: grid;
    gap: 10px;
    grid-auto-flow: column;
    grid-auto-columns: 40%;

    overflow-x: auto;
    overscroll-behavior-inline: contain;
    cursor: pointer;
    
    
   }

   .btns {

    position: absolute;
    top: 35%;
    left:0;
    background-color: #8d9686;
    font-size: 24px;
    padding-left: 5px;
    border-radius: 5px;
    cursor: pointer;
    color: white;

   }

   .bt {

    position: absolute;
    top: 35%;
    right:0;
    background-color: #8d9686;
    font-size: 24px;
    padding-right: 5px;
    border-radius: 5px;
    cursor: pointer;
    color: white;


   }

   .bt:hover, .btns:hover {

    background-color: #a9e27e;
    color: white;
   }

   .gris::-webkit-scrollbar{

    width: 0;
   }

   .gris img {

    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
   }



   .gris div h4 {

    color: #9be95f;
   }



   .prof-infor {

    padding: 0 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: top;
    justify-content: space-around;
    gap: 1rem;
    width: 100%;
    max-width:600px;
    background-color:rgb(255, 250, 250);
    padding-top: 15px;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-radius: px;
   }

   .inform {
    font-famil: 'Times New Roman', Times, serif;
    flex: 1;
   }

   .profi img {

   width: 100%;
   max-width: 90px;
   height: 120px;
   object-fit: cover;
   vertical-align: top;
   border-radius: 1px;
   }

   .contact-us {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    

   }

.sending-doc {
border: 1px solid #bdbaba;
border-radius: 10px;
padding: 8px;
align-items: center;

}

.sending-docs input {
  display: block;
  width: 100%;
  max-width: 500px;
  background-color: #e7e4e4;
  padding: 15px;
  margin-top: 10px;
  outline: none;
  border: 1px solid #bdbaba;
  border: #e7e4e4;
}

.sending-docs input::placeholder {
    text-align: center;
}

 .sending-doc input, .sending-doc textarea 
 {
  display: block;
  max-width: 700px;
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  outline: none;
  border: 1px solid #bdbaba;
  border-radius: 10px;
  border-width: 1px;
  background-color: #e8f5e0;
  margin-top: 8px;
 }


 .sending-doc p {
    text-align: end;
    color: #9a9c99;
    max-width: 700px;
    font-family:'Times New Roman', Times, serif;
 
 }

 .sending-doc span {
    color: rgb(233, 30, 30);
    font-family:'Times New Roman', Times, serif;
 }

 .sending-doc label {
    color: black;
    font-size: 20px;
    
 }

 .sub input {
    width: 150px;
    height: 50px;
    background-color: yellow;
    border-color: lab(93.28% -33.13 84.77);
    cursor: pointer;
    
 }



   


 @media only screen and (max-width: 902px) {
   
    .menus{
        display: none;
    }
   .mu {
    flex-basis: 45%;
   }

   
   .grids {

    width: 100%;
}

   .sample hr {

    display: none;
   }
   .menubars {

    display: flex;
   }

   .politic {

    display: grid;
    column-gap: 27px;
    grid-template-columns: 1fr 1fr;
    
   }

.float {

    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%
    
   }


   .politics {

    display: grid;
    column-gap: 30px;
    row-gap: 30px;
    
    
   }

    

   .menu {

    display: flex;
    flex-direction: column;
    background-color: grey;
    position: absolute;
    top: 0;
    left: -1000px;
    width: 70%;
    height: 100vh;
    justify-content: flex-start;
    align-items: center;
    margin-right: 0;
    padding-top: 40px;

   }

   .menu-par:checked ~ .menu {
    left: 0;
   }

   .menu li {

    margin: 30px;
   
   }

  .gallery {

        grid-template-columns: auto auto;
    } 
  .store {
    grid-template-columns: 2fr 1fr;
    
}

  .grids {

    width: 100%;
}

 
.floa {
 width: 250px; 
float: left; 
margin-right: 15px; 
margin-left: 15px;
margin-bottom: 25px;             aspect-ratio: 7/7;
object-fit: cover;

  }
     

   }

 



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

    .flext {
  flex-direction: column;
}

.politis {
    display: grid;
    grid-template-columns:  1fr;
    column-gap: 10px;
    row-gap: 10px;

}

.float {

    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%
    
   }

.floa {
 width: 150px; 
float: left; 
margin-right: 15px; 
margin-left: 15px;
margin-bottom: 25px;             aspect-ratio: 7/7;
object-fit: cover;
  }


.grids {

    width: 100%;
}

footer {

    font-size: 15px;
}

.size {
    display: none;
}

.store {
    grid-template-columns: 1fr;
    
}


 

.sample hr {

    display: block;
   }

section {
   width: 90%;
 }

.pics {
 flex-basis: 44%
}

.about {
    flex-direction: column-reverse;
}

.select ul {
max-width: 600px;
}

 .politic {

    display: grid;
    grid-template-columns: 1fr 1fr;
    
   }

   .politics {

    display: grid;
    grid-template-columns:  1fr 1fr;
    
   }



   
}

 


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


.menu {
width: 100%;
align-items: center;
}

  .float {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px; 
}




.contact-us {
grid-template-columns: 1fr;
}

.body {
display: grid;
grid-template-columns: 1fr;
}

.politi {
display: grid;
grid-template-columns: 1fr;
column-gap: 20px;
row-gap: 20px;  
}


.op {
display: grid;
grid-template-columns: 1fr 1fr
}


.footer-info div {
display: grid;
grid-template-columns: 1fr
   }


.size {
display: none;
}



.store  {
display: flex;
flex-direction: column-reverse;   
}
.sideopinion {
padding-top: 20px;
padding-left: 0px;
}

.body {

 
    gap: 0;
}

.sidebar {
display: grid;
grid-template-columns: 1fr;
width: 100%;
}



html {
width:100%;
   }



.float {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
   }
.sideopinion {
padding-top: 20px;
padding-left: 0px;
}

.body {

 
    gap: 0;
}

.floa {
width: 150px; 
float: left; 
margin-right: 15px; 
margin-left: 15px; 
margin-bottom: 25px;             aspect-ratio: 7/7;
object-fit: cover;
  }
    
}

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


.floa {
width: 150px; 
float: left; 
margin-right: 15px; 
margin-bottom: 25px;  
margin-left: 15px;          
aspect-ratio: 7/7;
object-fit: cover;
  }

.menubars {
display: block;
}


.sideopinion {
padding-top: 20px;
padding-left: 0;
}

.body {

 
    gap: 0;
}

.float {
display: grid;
grid-template-columns: 1fr;
gap: 13px;
    
   }

}