body {


  background: #fffffffd;
  
    }

    html, body {
        height: 99%;
    }

    .arbuttonicon{
   
      bottom: 10%;
      right: 22.5%;
      position: absolute;
      display: block;
      grid-gap: 0px;
      z-index: 98;
  }
 


  







    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .6;
        background-color: #000000;
    }




    .header-logo {
        display: inline-block;
        position: absolute;
        margin: 0;
        padding: 0;
        left: 29px;
        top: 6%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: 501;
        width: 120px;
    }


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



      background: #fffffffd !important;
    
      }

      
    }


        model-viewer{

          --progress-mask: transparent;
   
          --poster-color: transparent;
         
            z-index: 1;
          
          }
          
         
          model-viewer {
            --progress-mask: transparent;
   
            --poster-color: transparent;
           
            width: 60%;
            height: 99%;
            top: 0%;
            left: 63%;  
            z-index: 1;
           
            
            
          }
          
   
          .grid-container{

                width: 90vw;
                height: 100%;
                top: 0%;
                right: 25%;
                position: absolute;
                display: inline;
                grid-gap: 0px;
                z-index: 98;
                }


#u1 {
  display: inline;
  position:absolute;
  width: 15%;
  left: 5%;
  top: -5%;
}

#u2 {
  display: inline;
  position:absolute;
  width: 15%;
  left: 5%;
  top: 120%;
}

#u3 {
  display: inline;
  position:absolute;
  width: 15%;
  left: 5%;
  top: 240%;
}




       /* HIDE RADIO */


        [type=radio] { 
            position: relative;
            opacity: 0;
            width: 0;
            float: right;
            height: 1px;
            width: 300px;
            
      
          }
          
          /* IMAGE STYLES */
          [type=radio] + img {
            cursor: pointer;
            width: 14%;
            margin-left: 3%;
            margin-top: 8%;
           
            border: 2px solid;
            border-color: rgb(229, 229, 229);
                  border-radius: 20em;
                 
    
           
          }
          
          /* CHECKED STYLES */
          [type=radio]:checked + img {
       border: 2px solid;
  border-color: rgb(63, 63, 63);
        border-radius: 20em;
       
          }
  


          .secimbolumu {
            position: absolute;
            top: 30%;
          }

                
          .kolbuttons {
            position: absolute;
            top: 7%;
            left: 75%;
            width: 500px;
            height: 80px;
            margin-top: -40px;
            margin-left: -250px;
            background: rgba(255, 255, 255, 0);
            transform: translateZ(0);
          }



          .accordion {
            background-color: rgba(255, 255, 255, 0);
            color: rgb(95, 95, 95);
            cursor: pointer;
            padding: 15px;
            width: 23%;
            height: 6%;
            border: none;
            text-align: center;
            position: relative;
            left: 40%;
            margin-top: 1%;
            outline: none;
            font-size: 17px;
            border: solid 2px;
            border-radius: 50px;
            border-color: rgb(124, 124, 124);
            transition: 0.4s;
            font-family: "Gilroy-Regular", sans-serif;
          }
          
          .active, .accordion:hover {
            background-color: rgba(255, 255, 255, 0.089);
            
          }
          
          .accordion:after {
            content: '\002B';
            color: rgb(153, 153, 153);
            font-weight: bold;
            float: right;
            margin-left: 5px;
          }
          
          .active:after {
            content: "\2212";
          }
          
          .panel {
            padding: 1px 1px;
            background-color: rgba(250, 250, 250, 0);
            width: 20%;
            height: auto;
            position: relative;
            left: 43.5%;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
          }