/* Keeping your existing CSS with some minor optimizations */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

#home-main {
  position: relative;
  top: -82px;
  padding: 60px;
  text-align: center;
  margin-top: 60px;
  background:
    radial-gradient(circle at right bottom, #fbf1f2 0%, transparent 50%),
    linear-gradient(to right, #f8f8f8 0%, #d3ddfa 50%, #abc1ff 100%);
}

.titles {
  font-weight: 300;
  color: #0d0f2c;
}

.extra-bold {
  font-weight: 700;
}

.sub-title {
  font-weight: 600;
  background: linear-gradient(to right, #7f00ff, #007bff, #0080ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.home-main-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  align-items: center;
}

.home-btn {
  border: none;
  border-radius: 30px;
  padding: 12px 30px;
  font-weight: 600;
  font-size: 14px;
  max-width: 200px;
  display: flex;
  justify-content: center;
}

/* Mobil ekranlar için sadece boyut küçültme */


.home-btn-one {
  background-color: #000000;
  color: white;
}

.home-btn-two {
  background-color: white;
  display: flex;
  align-items: center;
  gap: 6px;
}

.fa-play {
  background-color: black;
  color: white;
  font-size: 6px;
  padding: 6px 6px;
  border-radius: 100%;
}

.section-two {
  margin-top: 65px;
}

.university-logo {
  height: 45px;
}

.tooth {
  width: 100%;
  margin: auto;
}



.advanced-btn, .key-features-btn {
  color: rgb(27, 27, 27);
  border: 1px solid #7472895e;
  background-color: #f9fafd;
  padding: 10px 7px;
  border-radius: 30px;
  font-weight: 600;
}

.advanced-btn.active,
.key-features-btn.active {
  color: #2d23b2;
  border: 1px solid #2d23b26d;
  background-color: #f7f5ff;
}


.group-radiography {
  width: 100%;
  max-width: 300px;
  margin: auto;
}

.cloud {
  width: 50%;
  height: 50%;
}

.all-company {
  width: 100%;
  max-width: 282px;
  margin: auto;
}



.ai-modal-div {
  background-color: #f5f6fc;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 12px 8px;
  width: 100%;
  
}

.ai-modal {
  height: 210px;
  width: 100%;
  max-width: 707px;
  background-color: #f5f6fc;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  object-fit: cover;
}

.tooth-div {
  border: 1px solid rgba(0, 0, 0, 0.107);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 17px 90px;
}

.section-three {
  background:
    radial-gradient(circle at right bottom, #fbf1f2 0%, transparent 50%),
    linear-gradient(to right, #f8f8f8 0%, #d3ddfa 50%, #abc1ff 100%);
  margin-top: 100px;
  padding: 30px 20px;
}

.card {
  height: 250px;
  border: none;
}


.section-four {
  background:
    radial-gradient(circle at right bottom, #000000 0%, transparent 80%),
    linear-gradient(to right, #434298 0%, #5178c5 50%, #abc1ff 100%);
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 1200px;
  color: white;
  margin: auto;
}

.section-four-modal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-btn {
  border: none;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.259);
  background-color: black;
  color: white;
  padding: 10px 20px;
}

.analysis-list {
  margin-left: 4px;
  background:
    radial-gradient(circle at right bottom, #f9f6f6 0%, transparent 50%),
    linear-gradient(to right, #f8f8f8 0%, #f6f6f7 50%, #f6f7f7 100%);
  border-radius: 12px;
}

.company-list {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at right bottom, #fbf1f2 0%, transparent 50%),
    linear-gradient(to right, #f8f8f8 0%, #d3ddfa 50%, #abc1ff 100%);
  padding: 30px 46px;
  border-radius: 12px;
}

.our-modal {
  background-color: white;
  border-radius: 12px;
  height: auto;
  max-width: 1200px;
  padding: 30px 20px;
  background: radial-gradient(circle at right bottom, #f9f6f6 0%, transparent 50%), linear-gradient(to right, #f8f8f8 0%, #f6f6f7 50%, #f6f7f7 100%);
}


.our-box {
  max-width: 550px;
  background-color: white;
  border-radius: 12px;
  max-height: 900px;
  padding: 16px 16px;
  margin-top: 20px; 
  margin-bottom: 12px;
}

.our-box h6{
  font-weight: 700;
}

.our-card {
  width: 500px;
}

.content-display {
    display: none;
}
.content-display.active {
    display: block;
}
.content-display{
  background-color: white !important;
  color: black !important;
}
.our-box.active {
    background-color: #000000;
    color: white;
}

.testimonials-box{
  background-color: #f9fafd;
  padding: 20px 24px;
  border-radius: 12px;
}

.see-more{
  border: none;
  background-color: #f9fafd;
  text-decoration: underline;
  color: #575c6b;
}

.dr-photo{
  width: 15%;
  height: 15%;
  border-radius: 100%;
}

.featured-blogs {
    background:
    radial-gradient(circle at right bottom, #fbf1f2 0%, transparent 50%),
    linear-gradient(to right, #f8f8f8 0%, #d3ddfa 50%, #abc1ff 100%);
    padding: 50px 50px;
}

.blog-img{
  width: 350px;
  margin: auto;
  border-radius: 16px;
}

.blog-detail-btn{
  border-radius: 24px;
  background-color: black;
  color: white;
  padding: 8px 50px;
}

.blog-change{
  display: flex;
  justify-content: space-around;
}

.blog-change button{
  border: none;
  background-color: transparent;
}

.section-four-two {
  background:
    radial-gradient(circle at right bottom, #000000 0%, transparent 80%),
    linear-gradient(to right, #443f7a 0%, #ad99bd 50%, #abc1ff 100%);
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 1200px;
  color: white;
  margin: auto;
}

.section-four-modal-two {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion {
  max-width: 900px;
  margin-left: 55px;
  margin-top: 50px;
  font-family: Arial, sans-serif;
  border-radius: 16px;
  border: none;
}


.accordion-header {
  padding: 15px 20px;
  background-color: #e8eaf6d6;
  border-radius: 16px;
  cursor: pointer;
  font-weight: bold;
  border: none;
  transition: background-color 0.3s ease;
}

.accordion-header.active {
  background-color: #000;
  border-radius: 16px;
  border: none;
  color: #fff;
}

.accordion-content {
  max-height: 0;
  border-radius: 16px;
  overflow: hidden;
  background-color: #f7f8fe;
  padding: 0 20px;
  border: none;
}

.accordion-item{
  border: none;
  margin-top: 6px;
}

.accordion-content.open {
  max-height: 500px;
  padding: 15px 20px;
  border: none;
  border-radius: 16px;

}

.switch-1{
  width: 100%;
}
.switch-2{
   width: 100%;
}




.doctor-carts{
  transform: scale(0.85);
}

/* Büyük tablet ekranlar için ek responsive kurallar */
@media (max-width: 1024px) {
 #home-main {
   padding: 40px 30px;
 }
 
 .home-main-buttons {
   flex-direction: column;
   gap: 15px;
 }
 
 .home-btn {
   max-width: 250px;
 }
 
 

 .tooth-div {
   padding: 2px 40px;
 }
 
 .section-four-modal,
 .section-four-modal-two {
   flex-direction: column;
   gap: 20px;
   text-align: center;
 }
 
 .accordion {
   margin-left: 20px;
   max-width: 700px;
 }
 
 .our-card {
   width: 400px;
 }
 
 .featured-blogs {
   padding: 40px 30px;
 }
 
 .blog-img {
   width: 280px;
 }
 
 .feature-card-text-3 {
   left: 50%;
   padding-top: 80px;
 }
}

/* Tablet ve küçük ekranlar için ek responsive kurallar */
@media (max-width: 768px) {
 #home-main {
   padding: 30px 20px;
 }

.switch-btn{
  margin-bottom: 50px;
}
 
.cloud {
  width: 100%;
  height: 100%;
}
 
 .home-btn {
   padding: 10px 20px;
   font-size: 13px;
   max-width: 180px;
 }

 
 .ai-modal-div,
 .ai-modal {
   max-width: 100%;
 }
 
 .tooth-div {
   padding: 2px 20px;
 }
 
 .section-three {
   padding: 20px 15px;
 }
 
 .section-four,
 .section-four-two {
   padding: 50px;
 }
 
 .accordion {
   margin-left: 0;
   max-width: 100%;
 }
 
 .our-modal {
   padding: 20px 15px;
 }
 
 .our-card {
   width: 100%;
 }
 
 .company-list {
   padding: 20px 25px;
 }
 
 .featured-blogs {
   padding: 30px 20px;
 }
 
 .blog-img {
   width: 100%;
   max-width: 300px;
 }
 
 .blog-detail-btn {
   padding: 8px 30px;
 }
 
 .feature-card-text {
   padding: 20px;
 }
 

 
 .feature-card-text-3 {
   left: 50%;
   padding-top: 60px;
   padding-left: 20px;
   padding-right: 20px;
 }
 
 .doctor-carts {
   transform: scale(0.75);
 }
}

/* Mobil ekranlar için */
@media (max-width: 480px) {
 #home-main {
   padding: 20px 15px;
   margin-top: 40px;
   padding-top: 70px;
 }
 
 .titles {
   font-size: 24px;
 }
 
 .sub-title {
   font-size: 16px;
 }
 
 .home-btn {
   padding: 8px 15px;
   font-size: 12px;
   max-width: 150px;
 }
 
 .university-logo {
   height: 40px;
 }
 
 .accordion-header {
   padding: 12px 15px;
   font-size: 14px;
 }
 
 .accordion-content.open {
   padding: 12px 15px;
 }
 
 .our-box {
   padding: 12px 12px;
   margin-top: 15px;
 }
 
 .testimonials-box {
   padding: 15px 18px;
 }
 
 .dr-photo {
   width: 20%;
   height: 20%;
 }
 
 .featured-blogs {
   padding: 20px 15px;
 }
 
 .blog-change {
   flex-direction: column;
   gap: 15px;
 }
 

 .feature-card-text-3 {
   padding-top: 40px;
   padding-left: 15px;
   padding-right: 15px;
 }
 
 .doctor-carts {
   transform: scale(0.65);
 }
}