@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');

*{
     padding:0;
     margin:0;
    font-family: 'Cairo', sans-serif;
}
html {
    scroll-behavior: smooth;
}
h1 {
    text-align: center;
	color: white;
}
h2{
    text-align: center;
    color: rgb(0, 55, 255);
  
}


   
.affiliate-image {
    width: 200px; /* Adjust this value as needed */
    height: auto;
    display: block;
    transition: transform 0.3s ease;
   
}
.a-aff {
    display: flex;
    justify-content: center;
    align-items: center;
}

.affiliate-image:hover {
    transform: scale(1.05);
}




#backa{
color:red	
}
h3{
    text-align: center;
    color: orange;
  
}
ul {
    list-style-type: none; /* Remove default bullets */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    color: white; /* Set text color to white */
	text-align: center;
    margin-left:10px ;
    margin-right: 10px;
}

li {
    padding: 10px 0; /* Add padding for spacing */
    border-bottom: 1px solid #444; /* Add a bottom border for separation, slightly lighter than black */
    color: white; /* Ensure list items have white text color */
}

/* Optional: Customize the list bullet */
li::before {
    content: "•"; /* Custom bullet character */
    color: white; /* Custom bullet color */
    display: inline-block;
    width: 16px; /* Set a fixed width */
    margin-left: -16px; /* Adjust margin to match the width */
}

.symols{
    text-align: center;
    color: rgb(0, 55, 255);
  margin-top: 20px;
  margin-bottom: 20px;
}
.tagclan{
    text-align: center;
    color: rgb(0, 55, 255);
  margin-top: 20px;

}
p {
    text-align: center;
    margin-left:10px ;
    margin-right: 10px;
}
.emaill{
   color:green;
}
.whoiswe{
    margin:20px 10px 60px 10px;
    }
.first-paragraph{
margin:100px 0px 0px 0px;
}
.first-h1{
color: white;
}



         






#name1,#name2,#name3,#name4,#name5,#name6,#name7,#name8,#name9,#name10,#name11,#name12,#name13,#name14,#name15,#name16,#name17,#name18,#name19,#name20,#name21,#name22,#name23,#name24,#name25,#name26,#name27,#name28,#name29,#name30,#name31,#name32,#name33,#name34,#name35,#name36,#name37,#name38,#name39,#name40,#name41,#name42,#name43,#name44,#name45,#name46,#name47,#name48,#name49,#name50,#name51,#name52,#name53,#name54,#secondname1,#secondname2,#secondname3,#secondname4,#secondname5,#secondname6,#secondname7,#secondname8,#secondname9{
     height:41px;
     width:220px;
     color: black;
     color: white;
     text-align: center;
     background-color:red;   
     border: solid black 1px;
     border-radius:3px;
     font-size:16px;     
    margin:10px 0px 0px 0px;
}
.nanes input {
    height: 41px;
    width: 220px;
    color: white;
    text-align: center;
    background-color: red;
    border: solid black 1px;
    border-radius: 3px;
    font-size: 16px;
    margin: 10px 0px 0px 0px;
}
body{
     background-color: white;
     display:flex;
     flex-direction:column;
     align-items: center;
     background-color:rgb(140, 97,255);
     background-color:rgb(0, 255,49);
     background-color:rgb(0,0,28);

}
input{
    font-family:sans-serif;    
}
header{
      background-color:#f0f0f0;
      height:65px;
      width:100%;
      display:flex;
      align-items: center;
      justify-content:space-between;
      position: fixed;
      z-index:990; 
} 
.hamburger{
margin-right: 7%;

border:0px;
outline: none;
background-color:#f0f0f0;
}
.logo{
	margin:0px 58px 0px 0px;
    background-color: #f0f0f0;
    font-size:29px;
    text-decoration:none;
    font-weight:900;
    color:#01261C;
    color:rgb(0, 57, 0);
   font-family:sans-serif;
}  
.continuerbuttonhumb{
	width:30px;
	height:25px;
	display: block;
    position: relative;    
}
.part1,.part2,.part3{
height:4px;
width:100%;
border-radius: 2px;
background-color: black;
transition:all 0.3s ease;
position: absolute;
}
.part1{
margin:0px 0px 0px 0px;
}
.part2{
margin:8px 0px 0px 0px;
}
.part3{
margin:16px 0px 0px 0px;
}
.navbar{
     right:-100%;
     z-index:989;
     position: fixed;
     width:100%;
     height:100vh;
     background-color:rgb(0, 255,49);
     background-color:rgb(140, 97,255);
     transition: right 0.4s ease;
     overflow: auto;
}
/*move divs button navbar*/
.navbar-visible .part1 {
    transform: rotate(-45deg) ;
    margin:8px 0px 0px 0px;
}
.navbar-visible .part2 {
    opacity: 0;
}
.navbar-visible .part3 {
    transform: rotate(45deg);
   margin:8px 0px 0px 0px;
}
/*end move button navbar*/
.show{
right:0;
}
.divhelp{
	background-color:#f0f0f0 ;
	padding:3.5px 0px 0px 0px;
    height:40;
    width:59%;
    text-align: center;
}	 
.firstitems{
   margin:50px 0px 0px 0px;
   padding:0px 0px 15px 0px;
   background-color:rgb(0, 242, 138);
   display:flex;
   flex-direction:column;
   border: solid  black 1px;
   border-radius:10px;
   width:262px;
   width:280px;
   text-align: center;
   box-shadow: 0 0 10px 5px rgba(137, 97, 255,0.7);
}
.Secondtems{
   margin:50px 0px 0px 0px;
   padding:0px 0px 15px 0px;
   background-color:rgb(0, 242, 138);
   display:flex;
   flex-direction:column;
   border: solid black 1px;
   border-radius:10px;
   width:262px;
   width:280px;
   text-align: center;
    box-shadow: 0 0 10px 5px rgba(137, 97, 255,0.7);
}
.submit{
   height:41px;
   width:86px;
   border: solid black 0px;
   border-radius: 0px 25px 25px 0px;
   color:white;
   background-color: green;
   color:white;
   font-size:12px;
}
.nanes,.sconednanes{
   padding:0px 0px 0px 12px;
   width:180px;
   display:grid;
   grid-template-columns: repeat(2,1fr);
   gap:0px;   
}
.copy1,.copy2,.copy3,.copy4,.copy5,.copy6,.copy7,.copy8,.copy9,.copy10,.secondcopy1,.secondcopy2,.secondcopy3,.secondcopy4,.secondcopy5,.secondcopy6,.secondcopy7,.secondcopy8,.secondcopy9{
    height:40px;
    width:35px;
    font-size:11px;
    background-color:gray;
    color: black;
    border: solid black 1px;
    border-radius: 8px 0px 8px 0px;      
    margin:10px 0px 0px 5px;
}
.empty,.sconedempty{
    height:9px;
}
#inputText{
    height:73px;
	width:95%;
	border: solid black 1px;
    border-radius:10px;
    background-color:white;
    color: black;
   outline:none;
   font-size:20px;
   text-align: center;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
h2{
    text-align: center;
}
.copy1:hover,.copy2:hover,.copy3:hover,.copy4:hover,.copy5:hover,.copy6:hover,.copy7:hover,.copy8:hover,.copy9:hover,.copy10:hover,.secondcopy1:hover,.secondcopy2:hover,.secondcopy3:hover,.secondcopy4:hover,.secondcopy5:hover,.secondcopy6:hover,.secondcopy7:hover,.secondcopy8:hover,.secondcopy9:hover{
    background-color:rgb(0, 255, 0);
}
.h2,.sconedh2{
    margin: 9px 0px 9px 0px;
}
img{
    width:24px;
    height:24px;
}
/* this is google ads*/
.divforads{
    width:300px;
    height:300px;
    border: solid black 1px;
    margin:50px 0px 0px 0px;
    background-color: white;
}
.divforsecondads{
    width:300px;
    height:300px;
    border: solid black 1px;
    margin:50px 0px 10px 0px;
    background-color: white;
}

.table,.table2{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    gap:0px;
}
.hhh,.hhhh{
	font-size:20px;
	font-weight:500;
	color: black;
margin:5px 0px 0px 0px;
}
.doomm2,.doom2{
    background-color:white;
    width:180px;
    margin:0px 10px 5px 0px;
    height:35px;
    border: solid black 1px;
    border-radius:25px 25px 25px 25px;
     display:flex;
    align-items: center;   
}
#secondinputText,#secondinputText2{
   margin:0px 0px 0px 23px;
   height:25px;
   border: solid black 0px;
   outline:none;
   width:70%;
   background-color: white;
   font-size:15px;
}
.divsubmit{
     display:flex;
     flex-direction:column;
     align-items: center;
}
.submit2{
   height:35px;
   width:86px;
   border: solid black 0px;
   border-radius: 25px 25px 25px 25px;
   color:white;
   background-color: green;
   color:white;
   font-size:12px;
}
.footer{
color: black;
   background-color:#f0f0f0;
   width:100%;
   text-align: center;
}
.navigation{
     display:flex;
     flex-direction:column;
     align-items: center;   
     padding:77px 0px 0px 0px;
}
.navigation a{
	display: flex;
	align-items: center;
    margin-left: auto;
     color: white;
     font-size:20px;     
     text-decoration:none;   
     font-weight:700;
     height:10px;     
     padding: 7px 0px 0px 0px; 
     margin-right:20px;
     }
.navigation .aofhome{
padding: 12px 0px 0px 0px;  
}
.navigation .ofsupport{
padding: 1px 0px 0px 0px; 
}
.navigation .aofcontact{
padding: 5px 0px 0px 0px;  
}
/*.navigation a:focus{
    outline: none;  
}*/
.home,.homes,.share{
     width:35px;
     height:35px;
     filter:invert(100);
     margin:0px 38px 0px 0px;
     transition: right 0.3s ease;
}
.share{
    width:40px;
     height:40px;
}
.homes{	
margin:0px 39px 0px 0px;
}
.boxofaboutme,.boxofklan,.boxofnames,.boxofhome,.boxofsupport,.boxofshare,.boxofSymbols{
     margin:0px 0px 0px 0px;  
     height:80px;
     width:100%;
     display:flex;
     align-items: center;
    transition: right 0.3s ease;
}
.boxofsupport{
padding:0px 0px 0px 10px;
}
.boxofaboutme:hover,.boxofklan:hover,.boxofnames:hover,.boxofhome:hover,.boxofsupport:hover,.boxofshare:hover,.boxofSymbols:hover{
	background-color:rgb(140, 0, 255);
}
button{
outline:none;
}
.TikTok,.Twitter,.sharimg,.Instagram{
margin:0px 5px 0px 5px;
width:20px;
height:20px;
}
.sharimg{
margin:0px 5px 0px 0px;	
border-radius:5px;
width:23px;
height:23px;
}
.support-img{
margin:0px 5px 0px 5px;	
width:22px;
height:22px;
}
.links-dev{
margin:0px 0px 5px 0px;
}
span{
color: green;
}
.footer-title{
color:rgb(0, 57, 0);
}
#copyright{
color:rgb(0, 50, 0);
}
p{
color:white;
}
.btn-more {
    display: block;
    margin: 2rem auto;
    background: linear-gradient(135deg, #00ea3b, #037c1d);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.8rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-more:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 234, 27, 0.4);
}

.Thirdly-items{
  width:280px;
  margin: 100px auto;
  padding: 10px;  
   background-color:rgb(0, 242, 138);
   border: solid  black 1px;
   border-radius:10px;   
   box-shadow: 0 0 10px 5px rgba(137, 97, 255,0.7);  
}
#screen {
  height:75px;
	width:100%;	
	border: solid black 1px;
    border-radius:10px;
    background-color:white;
    color: black;
   outline:none;
   font-size:20px;
   text-align: center;
   margin-bottom:10px;
}
.buttons{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
  margin-top:10px;
}
.buttons button {  
  font-size: 18px;
  height:45px;
    width:45px;
    outline:none;
}
.buttons button:hover{
background-color:rgb(0, 255, 0);
border:1px solid black;
outline:none;
}
.del,.copy-Screen,.dell-all{
height:40px;
width:30%;
margin:3px;
border:0px solid black;
border-radius:10px;
outline:none;
color:white;	
}
.del{
background-color: orange;	
}
.copy-Screen{
background-color:green;	
}
.dell-all{
background-color:red;
}
.copy-Screen:hover{
background-color:rgb(0, 255, 0);
outline:none;
color: black;	
}
.del:hover{
background-color:rgb(255, 200, 0);
color: black;		
}
.dell-all:hover{
background-color:rgb(199,0,62);
color: black;
}
#protectedImage:hover{
transition:all 0.3s ease;	
width:30px;
height:30px;
}
.logoimg{
    width: 160px;
    height: 40px;
    float: left;
    margin-left:10%;
}
/* Style for the navigation bar */
.navigation2 {
    overflow: hidden; /* Clear floats */
  }
  
  /* Style for the navigation links */
  .navigation2 a {
    float: right; /* Float the links to the right */
    display: block; /* Make the links block elements */
    color:rgb(140, 97,255);
    color: rgb(2, 2, 58);
    font-weight:600;
    text-align: center; /* Center align the text */
    padding: 5px 20px; /* Add padding */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s; /* Add transition effect for color change */
    transition: color 0.3s, border-bottom-color 0.3s;
  }
  /* Style for the active link */
  .navigation2 a.active {
    background-color: #4CAF50; /* Background color */
    
  }
  /* Hover effect for the navigation links */
  .navigation2 a:hover {
    color:rgb(80, 17, 253) ; 
    font-weight: 900;
    border-bottom: 2px solid rgb(80, 17, 253) ; 
  }
  
  /* Clear floats after the navigation bar */
  .navigation2:after {
    content: "";
    display: table;
    clear: both;
  }
  .nanes input::placeholder{
    color:white;
  }
  .sconednanes input::placeholder{
    color:white;
  }
  /* Styles for screens smaller than 600px */
  @media screen and (max-width: 600px) {
    .navigation2{
        display:none;
    }
  }
   /* Your styles for tablet-sized screens here */
  @media screen and (min-width: 601px) and (max-width: 799px) {
    .navigation2 .a-for-symbole{
        display: none;     
    }
	
    .hamburger{
        margin-right: 3%;
    } 
    .navigation2 .tagKlanLink{
        display: none;
    }
    .firstitems{
        width: 590px;
    }
    .nanes input{
        height:47px;
        width: 400px;
        margin-left: 60px;
    }
    #name1,#name2,#name3,#name4,#name5,#name6,#name7,#name8,#name9,#name10,#name11,#name12,#name13,#name14,#name15,#name16,#name17,#name18,#name19,#name20,#name21,#name22,#name23,#name24,#name25,#name26,#name27,#name28,#name29,#name30,#name31,#name32,#name33,#name34,#name35,#name36,#name37,#name38,#name39,#name40,#name41,#name42,#name43,#name44,#name45,#name46,#name47,#name48,#name49,#name50,#name51,#name52,#name53,#name54{
        height:47px;
        width: 400px;
        margin-left: 60px;
    }
    .copy1,.copy2,.copy3,.copy4,.copy5,.copy6,.copy7,.copy8,.copy9,.copy10,.secondcopy1,.secondcopy2,.secondcopy3,.secondcopy4,.secondcopy5,.secondcopy6,.secondcopy7,.secondcopy8,.secondcopy9{
        width: 40px;
        height:46px;
    }
    .nanes img{
        width: 30px;
        height: 32px;
    }
    #inputText{
        height:83px;
        width:95%;
        border-radius: 7px;
        }
    .Secondtems{
        width: 590px;
    }   
    #secondname1,#secondname2,#secondname3,#secondname4,#secondname5,#secondname6,#secondname7,#secondname8,#secondname9{
        height:47px;
        width: 400px;
        margin-left:60px;
    } 
    #secondinputText,#secondinputText2{
       font-size: 16px;
    }
    .doomm2,.doom2{
        width: 400px;
        height: 45px;
    }
    .hhh,.hhhh{
        font-weight:800;
    }
    .submit2{
       width: 150px;
        height: 50px;
        font-size: 18px;
    }
    .Thirdly-items{
        width:490px ;    
    }
    #screen{
        height: 90px;
    }
    .buttons{
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-gap: 5px;  
      }
      .buttons button {  
        font-size: 18px;
        height:55px;
          width:65px;
          outline:none;
      }
      .del ,.dell-all,.copy-Screen{
        height: 45px;
        width: 153px;
      }
      .logoimg{
        margin-left:5%;
    }

}
@media screen and (min-width: 800px) and (max-width: 991px){
    .navigation2 .a-for-symbole{
        display: none;     
    }
	
    .hamburger{
        margin-right: 3%;
    } 
    .firstitems{
        width: 590px;
    }
    .nanes input{
        height:47px;
        width: 400px;
        margin-left: 60px;
    }
    #name1,#name2,#name3,#name4,#name5,#name6,#name7,#name8,#name9,#name10,#name11,#name12,#name13,#name14,#name15,#name16,#name17,#name18,#name19,#name20,#name21,#name22,#name23,#name24,#name25,#name26,#name27,#name28,#name29,#name30,#name31,#name32,#name33,#name34,#name35,#name36,#name37,#name38,#name39,#name40,#name41,#name42,#name43,#name44,#name45,#name46,#name47,#name48,#name49,#name50,#name51,#name52,#name53,#name54{
        height:47px;
        width: 400px;
        margin-left: 60px;
    }
    .copy1,.copy2,.copy3,.copy4,.copy5,.copy6,.copy7,.copy8,.copy9,.copy10,.secondcopy1,.secondcopy2,.secondcopy3,.secondcopy4,.secondcopy5,.secondcopy6,.secondcopy7,.secondcopy8,.secondcopy9{
        width: 40px;
        height:46px;
    }
    .nanes img{
        width: 30px;
        height: 32px;
    }
    #inputText{
        height:83px;
        width:95%;
        border-radius: 7px;
        }
    .Secondtems{
        width: 590px;
    }   
    #secondname1,#secondname2,#secondname3,#secondname4,#secondname5,#secondname6,#secondname7,#secondname8,#secondname9{
        height:47px;
        width: 400px;
        margin-left:60px;
    } 
    #secondinputText,#secondinputText2{
       font-size: 16px;
    }
    .doomm2,.doom2{
        width: 400px;
        height: 45px;
    }
    .hhh,.hhhh{
        font-weight:800;
    }
    .submit2{
       width: 150px;
        height: 50px;
        font-size: 18px;
    }
    .Thirdly-items{
        width:490px ;    
    }
    #screen{
        height: 90px;
    }
    .buttons{
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-gap: 5px;  
      }
      .buttons button {  
        font-size: 18px;
        height:55px;
          width:65px;
          outline:none;
      }
      .del ,.dell-all,.copy-Screen{
        height: 45px;
        width: 153px;
      }
      .logoimg{
        margin-left:5%;
    }
}
@media screen and (min-width: 902px) and (max-width: 1199px){
    .firstitems{
        width: 700px;
    }
	
    .hamburger{
        margin-right: 3%;
    } 
    .nanes input{
        height:47px;
        width: 600px;
        margin-left: 16px;
    }
    #name1,#name2,#name3,#name4,#name5,#name6,#name7,#name8,#name9,#name10,#name11,#name12,#name13,#name14,#name15,#name16,#name17,#name18,#name19,#name20,#name21,#name22,#name23,#name24,#name25,#name26,#name27,#name28,#name29,#name30,#name31,#name32,#name33,#name34,#name35,#name36,#name37,#name38,#name39,#name40,#name41,#name42,#name43,#name44,#name45,#name46,#name47,#name48,#name49,#name50,#name51,#name52,#name53,#name54{
        height:47px;
        width: 600px;
        margin-left: 16px;
    }
    .copy1,.copy2,.copy3,.copy4,.copy5,.copy6,.copy7,.copy8,.copy9,.copy10,.secondcopy1,.secondcopy2,.secondcopy3,.secondcopy4,.secondcopy5,.secondcopy6,.secondcopy7,.secondcopy8,.secondcopy9{
        width: 40px;
        height:46px;
    }
    .nanes img{
        width: 30px;
        height: 32px;
    }
    #inputText{
        height:83px;
        width:95%;
        border-radius: 7px;
        }
    .Secondtems{
        width: 680px;
    }   
    #secondname1,#secondname2,#secondname3,#secondname4,#secondname5,#secondname6,#secondname7,#secondname8,#secondname9{
        height:47px;
        width: 600px;
        margin-left: 6px;
    } 
    #secondinputText,#secondinputText2{
       font-size: 16px;
    }
    .doomm2,.doom2{
        width: 500px;
        height: 45px;
    }
    .hhh,.hhhh{
        font-weight:800;
    }
    .submit2{
       width: 150px;
        height: 50px;
        font-size: 18px;
    }
    .Thirdly-items{
        width:490px ;    
    }
    #screen{
        height: 90px;
    }
    .buttons{
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-gap: 5px;  
      }
      .buttons button {  
        font-size: 18px;
        height:55px;
          width:65px;
          outline:none;
      }
      .del ,.dell-all,.copy-Screen{
        height: 45px;
        width: 153px;
      }

}
  /* Styles for screens larger than 1200px */
  @media screen and (min-width: 1200px) {
    .firstitems{
        width: 700px;
    }
	 
    .hamburger{
        margin-right: 3%;
    } 
    .nanes input{
        height:47px;
        width: 600px;
        margin-left: 16px;
    }
    #name1,#name2,#name3,#name4,#name5,#name6,#name7,#name8,#name9,#name10,#name11,#name12,#name13,#name14,#name15,#name16,#name17,#name18,#name19,#name20,#name21,#name22,#name23,#name24,#name25,#name26,#name27,#name28,#name29,#name30,#name31,#name32,#name33,#name34,#name35,#name36,#name37,#name38,#name39,#name40,#name41,#name42,#name43,#name44,#name45,#name46,#name47,#name48,#name49,#name50,#name51,#name52,#name53,#name54{
        height:47px;
        width: 600px;
        margin-left: 16px;
    }
    .copy1,.copy2,.copy3,.copy4,.copy5,.copy6,.copy7,.copy8,.copy9,.copy10,.secondcopy1,.secondcopy2,.secondcopy3,.secondcopy4,.secondcopy5,.secondcopy6,.secondcopy7,.secondcopy8,.secondcopy9{
        width: 40px;
        height:46px;
    }
    .nanes img{
        width: 30px;
        height: 32px;
    }
    #inputText{
        height:83px;
        width:95%;
        border-radius: 7px;
        }
    .Secondtems{
        width: 680px;
    }   
    #secondname1,#secondname2,#secondname3,#secondname4,#secondname5,#secondname6,#secondname7,#secondname8,#secondname9{
        height:47px;
        width: 600px;
        margin-left: 6px;
    } 
    #secondinputText,#secondinputText2{
       font-size: 16px;
    }
    .doomm2,.doom2{
        width: 500px;
        height: 45px;
    }
    .hhh,.hhhh{
        font-weight:800;
    }
    .submit2{
       width: 150px;
        height: 50px;
        font-size: 18px;
    }
    .Thirdly-items{
        width:490px ;    
    }
    #screen{
        height: 90px;
    }
    .buttons{
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-gap: 5px;  
      }
      .buttons button {  
        font-size: 18px;
        height:55px;
          width:65px;
          outline:none;
      }
      .del ,.dell-all,.copy-Screen{
        height: 45px;
        width: 153px;
      }

  }
  






  :root {
    --primary-bg: rgb(0, 0, 28);
    --secondary-bg: rgb(6, 6, 46);
    --accent-color: rgb(0, 255, 49);
    --text-color: #ffffff;
    --border-color: rgb(20, 20, 80);
    --shadow-color: rgba(0, 255, 49, 0.15);
    --hover-color: rgb(0, 220, 42);
  }
  
 
  
  .sect-coments{
    background-color: var(--primary-bg);
    color: var(--text-color);
    padding: 20px;
    line-height: 1.6;
  }

  .sect-coments h2 {
    color: var(--accent-color);
    margin-bottom: 20px;
    font-size: 24px;
    text-shadow: 0 0 10px var(--shadow-color);
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
  }
  #commentsContainer{
    max-height: 600px; 
    overflow: auto;
  }

  .comment-box {
    background-color: var(--secondary-bg);
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 15px var(--shadow-color);
    border: 1px solid var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .comment-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), 0 0 20px var(--shadow-color);
  }

  .comment-author {
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 8px;
    font-size: 16px;
    display: flex;
    align-items: center;
  }
  
  .comment-author::before {
    content: "👤";
    margin-left: 8px;
  }

  .comment-text {
    margin-bottom: 15px;
    color: var(--text-color);
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 8px;
    border-right: 3px solid var(--accent-color);
  }

  .sect-coments button {
    background-color: var(--accent-color);
    color: rgb(0, 0, 28);
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 8px;
    margin-left: 8px;
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }

  .sect-coments button:hover {
    background-color: var(--hover-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }
  
  .sect-coments button:active {
    transform: translateY(0);
  }

  .sect-coments input,.sect-coments textarea {
    width: 95%;
    padding: 12px;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
    font-size: 14px;
    transition: border 0.3s, box-shadow 0.3s;
  }
  
  .sect-coments input:focus,.sect-coments textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px var(--shadow-color);
  }

  .sect-coments input::placeholder,
  .sect-coments textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }

  #commentForm {
    margin-bottom: 30px;
    background-color: var(--secondary-bg);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
  
  .sect-coments textarea {
    min-height: 100px;
    resize: vertical;
  }
  
  .container-comt {
    max-width: 800px;
    margin: 0 auto;
  }
  
  @media (max-width: 600px) {
    .sect-coments {
      padding: 10px;
    }
    
    .comment-box {
      padding: 12px;
      max-width: 310px;
    }
    #commentsContainer{
        max-height: 400px; 
        overflow: auto;
      }
    .sect-coments h2 {
      font-size: 20px;
    }
  }