@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap");

html {
  scroll-behavior: smooth;
}


:root {
    --primary-color: #A90705;
    
    --body-color: #ffffff;
    --myfont:"Roboto Mono", monospace;
    --white :rgb(255, 255, 255);
    --buttoncolor :linear-gradient(to bottom, rgb(232, 232, 216)); 
    --descriptioncolor : black;
  }

 


  
  
  .decriptionclassbutton {
    position: relative; /* For absolute positioning of the arrow */
    font-family: Arial, sans-serif;
    color: #333;
    padding: 10px 15px;
    text-align: center;
    border-bottom: 1px solid #333; /* Underline */
    margin:5px;
    font-weight:bold;
  }

  .decriptionclassbutton::after {
    content: '▼'; /* Downward arrow */
    position: absolute;
    bottom: -10px; /* Positioning below the element */
    left: 50%;
    transform: translateX(-50%); /* Centering the arrow */
    font-size: 12px;
  }
  
  

.maxdiv {max-width: 4000px;
    margin: 0 auto;
   
}

.maxdiv2 {max-width: 960px;
  margin: 0 auto;
 padding-top: 10px;
}






.profileclass{
    display: block;
    background: var(--white);
    width: 100%;
    height: 10px;
    
}



.prodetails{

  display: inline-block;
  background: var(--body-color);
  margin: 0 auto;
  width: 100%;
  height: auto;
  vertical-align: top;
  text-align: center;

    
}

.profiletext {
    display: inline-block;
    vertical-align: middle;
    
}

.imgprofile {
    display: inline-block;
    vertical-align: middle;
}

.profiletext h1  {
   
    font-size: 36px;
    padding: 10px;
    color: var(--descriptioncolor);
   display: flex;
   position: relative;
   animation-name: example;
   animation-duration: 1.5s;
    
}

.profiletext h2  {
   
    font-size: 18px;
    padding: 5px;
    color: var(--primary-color);
   display: flex;
   position: relative;
   animation-name: example;
   animation-duration: 1.5s;
    
}

@keyframes example {
    100%   { left:0px; top:0px;}
    0%  { left:200px; top:0px;}
  }




.profiletext p  {
    color: var(--primary-color);
    text-transform: uppercase;
       font-weight: bold;
    font-size: 20px;
    padding: 10px;
    text-align: left;
    position: relative;
    animation-name: example;
    animation-duration: 1.1s;
  
}
@keyframes example {
    100%   { left:0px; top:0px;}
    0%  { left:200px; top:0px;}
  }
 
.text-rectangle {
    width: 300px; /* Set the width of the rectangle */
    height: 120px; /* Set the height of the rectangle */
    
   
    color: #000; /* Text color */
    text-align: justify; /* Justify the text for better readability */
    overflow: auto; /* Add a scrollbar if the content exceeds the rectangle size */
    
}


.decriptionclass {
    padding: 5px;
    font-size: 13px;
    color: black;
    width: 300px;
    text-align: left;
    position: relative;
   animation-name: example;
   animation-duration: 1.9s;
}
@keyframes example {
    100%   { left:0px; top:0px;}
    0%  { left:200px; top:0px;}
  }



.profiletext button {
  
    margin: 15px;
    padding: 5px;
 
   display: flex;


}

.profiletext .classbutton {
   
    margin: 5px;
    padding: 5px;
   
   display: flex;
   position: relative;
   animation-name: cap;
   animation-duration: 1.5s;

}

@keyframes cap {
    100%   { left:0px; top:0px;opacity: 1;}
    0%  { left:-200px; top:0px;opacity: 0;}
    
  }


.imgprofile img {
    width: 400px;
    height: 400px;
}


.styled-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #080505;
    text-align: center;
    text-decoration: none;
    background: var(--buttoncolor);
    border: none;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); /* Shadow effect */
    transition: all 0.3s ease; /* Smooth transition on hover */
  
    /* Hover effect */
    cursor: pointer;
  }
  
  .styled-button:hover {
    transform: translateY(-2px); /* Move the button up slightly on hover */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2); /* Adjusted shadow on hover */
  }


  input[type="radio"] {
    margin-right: 5px; /* Adjust the value as needed */
    transform: scale(1.5);
}

  .services{
   


    text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
    width: 100%;
    height: auto;
    background: #ffffff;
   
  }

  .services .card{
   

    display: inline-block;
    padding: 15px;
    background: white;
    height: 350px;
    width: 250px;
    margin: 20px;
    border-radius: 10px;
    animation-name: fadeed;
   animation-duration: 1.5s;
   box-shadow: 5px 10px 10px rgba(11, 11, 11, 0.1); /* Adjusted shadow on hover */
}

@keyframes fadeed {
    100%   { opacity: 1;}
    0%  { opacity: 0;}
}


.cardcontent{
  padding: 10px;
  
  
}

.cardcontent p {
   
  font-size: 15px;
  text-decoration: none;
  color: rgb(132, 132, 132);
  padding-top: 25px;
  
  box-shadow: 5px 5px 5px rgba(11, 11, 11, 0.1);
  text-align: center;
}

.cardcontent h1 {

  padding-bottom: 25px;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(11, 11, 11, 0.1);
  text-decoration: none;
  color: var(--primary-color);
  padding: 5px;
}

.cardcontent h2 {
  
  padding-bottom: 25px;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(11, 11, 11, 0.1);
  text-decoration: none;
  color: var(--primary-color);
  padding: 5px;
}

 .promo {
  
  
  width: 100%;
  height: auto;
 
 }


 


 .insidepromo{

  display: flex;
  justify-content: center;
  padding: 10px;
  vertical-align: top;
  text-align: center;
  position: relative; /* Needed for absolute positioning inside */
 }

.promophoto{
  
  margin: 10px;
  height: auto;
  vertical-align: top;

  
}
.promophoto img{
  height: 300px;
  width: 450px;

}


.promcomment{
  border-radius: 10px;
  margin: 10px;
  height: 300px;
  width: 450px;
  background: #cff0f9;
  text-align: left;
  padding: 15px;
  overflow-y: auto;
  color: #5c5555;

  



}



/* Style the dropdown button to match .addstyle */
.dropbtn {
    background-color: var(--primary-color); /* Blue background */
    margin:13px 0px;
    color: white; /* White text color */
    padding: 8px 8px; /* Padding for size */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    font-weight: bold; /* Bold font */
    font-size: 16px; /* Larger font size */
    cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
    text-align: center; /* Center the text */
    display: block; /* Block display */
    width: 100%; /* Full width */
}

/* Dropdown content */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 5px; /* Rounded corners */
    text-align: left; /* Align text to the left inside dropdown */
}

/* Display dropdown content on click */
.dropdown-content.show {
    display: block;
}

/* Style the checkboxes */
.dropdown-content label {
    display: block;
    margin: 10px;
    cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
}

/* Style for hovered items */
.dropdown-content label:hover {
    background-color: #ddd;
}

/* Optional: Style for hover effect on the button */
.dropbtn:hover {
   background-color: var(--primary-color); /* Blue background */
}

/* Optional: Style for focus effect on the button */
.dropbtn:focus {
    outline: none; /* Removes the outline on focus */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5); /* Adds a glow effect on focus */
}




#spacee{
  width: 100%;
  height: 50px;

}

.coordonees{
  width: 100%;
  height: auto;
 }

 .insidecoordonees{  
 
  color: #080505;
  display: flex;
  justify-content: center;
  padding: 10px;
  vertical-align: top;
  text-align: center;

}

.insidecoordonees .selectclass{
display: block;
  width: 400px;
  height: 300px;
 background: #A90705;

}


.mycolon{
  padding: 3px;
display: block;

}
.CLASSES { width: 100%;

  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 5px 0;
}

.myselector {
  padding: 15px;
  font-size: 14px;
  color: #676060;

  
}


.displayform{
  margin: 10px;
  padding: 20px;
  background: #cff0f9;
  border-radius: 15px;
  
}



.inputstyle{
  width: 100%;
  height: 50px;
  display: block;
  margin-top: 15px;
  border-radius: 15px;
  border-style: none;
  padding: 18px;
  color: #04982b;
}

.textclass{
  font-size: 20px;
}


.colorbutton{
  background: #c21313;
  box-shadow: 5px 10px 10px rgba(11, 11, 11, 0.1); /* Adjusted shadow on hover */
}

.glow-on-hover {
  width: 220px;
  height: 50px;
  border: none;
  outline: none;
  color: #fff;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
  position: absolute;
  top: -2px;
  left:-2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: 100%;
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: #000
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  left: 0;
  top: 0;
  border-radius: 10px;
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 40px;
  text-align: center;
}



.social-icon {
  color: #fff;
  margin: 0 10px;
  text-decoration: none;

  
}

.social-icon img {
  width: 30px;
  height: 30px;

}
.social-icon:hover {
  color: #00aced; /* Change color on hover */
}



@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}



    
  
  @media only screen and (max-width: 915px) {
   
    .services,.insidecoordonees{
      display: block;
    }

    
        
      }


      @media only screen and (max-width: 700px) {
   
        .insidepromo{
          display: block;
        
          position: relative; /* Needed for absolute positioning inside */
        }


        .promophoto img{
          width: 360px;
        
        }
        
        
        .promcomment{
       
          width: 360px;
        }
        .insidepromo .displayform{
        
          margin-left: auto 20;
  margin-right: auto 20;
        } 
        .insidepromo .promophoto,.promcomment{
        
          margin-left: auto ;
  margin-right: auto 
  ;
        }

        
    

        
            
          }



/* Style for all input fields */
.inputstyle {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px; /* space between inputs */
}

/* Style for valid input */
.inputstyle.valid {
    border-color: green;
    background-image: url('/checkmark.PNG'); /* Replace with your checkmark image URL */
    background-size: 20px 20px;
    background-position: right 10px center;
    background-repeat: no-repeat;
}

/* Style for invalid input */
.inputstyle.invalid {
    border-color: red;
}

/* Placeholder style for invalid input */
.inputstyle.invalid::placeholder {
    color: red;
}



/* Style for select elements */
select.genreclass {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px; /* space between select and next input */
}





.commentbutton {
  position: absolute; /* Position relative to .promcomment */
  bottom: 30px; /* Distance from bottom */
  right: 60px; /* Distance from right */
  font-size: 30px; /* Size of the icon */
  color: #7c817c; /* Primary color */
  cursor: pointer;
  animation: pulseAnimation 2s infinite;
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.commentbutton:hover {
  color: #087f23; /* Darker shade for hover effect */
  transform: rotate(10deg) scale(1.1); /* Slight rotation and scale on hover */
}

/* Keyframes for the pulse animation */
@keyframes pulseAnimation {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.05); /* Subtle scaling for a gentle pulse effect */
  }
  100% {
      transform: scale(1);
  }
}

.rating {
  direction: rtl; /* Reverse the order of the stars */
}

.rating > input {
  display: none; /* Hide the default radio buttons */
}

.rating > label {
  cursor: pointer;
  font-size: 25px;
  color: #ccc; /* Color of non-selected stars */
  transition: color 0.3s ease; /* Smooth transition for color change */
}

/* Color of selected stars - you can customize these colors */
.rating > input:checked ~ label {
  color: #ff4b2b; /* Example: bright red-orange */
}

/* Hover effect for an interactive feel */
.rating > label:hover,
.rating > label:hover ~ label {
  color: #ff7e67; /* Lighter shade when hovering */
}