main{
               background-image: url(RESİMLER/arkaplan.png);
               background-repeat: no-repeat;
               background-size: contain;
               background-position: center;
               }
 .container #card {
                              position: relative;
                              max-width: 400px;
                              height: 215px;
                              background: #fff;
                              margin: 30px 10px;
                              padding: 20px 15px;
                              display: flex;
                              flex-direction: column;
                              box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
                              transition: 0.3s ease-in-out;
                            }
                            .container #card:hover {
                              height: 420px;
                            }
                            .container #card .imgbx {
                              position: relative;
                              width: 350px;
                             
                              z-index: 1;
                              box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
                              
                            }
                            .container #card .imgbx img {
                              width: 350px;
                              height: 180px;
                              
                              border-radius: 4px;
                              
                            }
                            .container #card .content {
                              position: relative;
                              margin-top: -220px;
                              padding: 10px 15px;
                              text-align: center;
                              visibility: hidden;
                              opacity: 0;
                              transition: 0.3s ease-in-out;
                            }
                            .container #card:hover .content {
                              visibility: visible;
                              opacity: 1;
                              margin-top: -0px;
                              transition-delay: 0.3s;
                            } 
                            #hak{
                              width: 1550px;
                              height: 450px;
                            }     
                          
                             .content a{
                              color: white;
                             }
                             #social {
                              display: flex;
                              align-items: center;
                              justify-content: center;
                            }
                            #social ul {
                              position: relative;
                              margin: 0;
                              padding: 0;
                              display: flex;
                            }
                            #social ul li {
                              position: relative;
                              list-style: none;
                              width: 35px;
                              height: 35px;
                              margin: 0 30px;
                              transform: rotate(-30deg) skew(25deg);
                              background: #ccc;
                            }
                            #social ul li span {
                              position: absolute;
                              top: 0;
                              left: 0;
                              width: 100%;
                              height: 100%;
                              background: #000;
                              transition: 0.5s;
                              display: flex !important;
                              align-items: center;
                              justify-content: center;
                              color: #fff;
                              font-size: 30px !important;
                            }
                            #social ul li:hover span:nth-child(5) {
                              transform: translate(40px, -40px);
                              opacity: 1;
                            }
                            #social ul li:hover span:nth-child(4) {
                              transform: translate(30px, -30px);
                              opacity: 0.8;
                            }
                            #social ul li:hover span:nth-child(3) {
                              transform: translate(20px, -20px);
                              opacity: 0.6;
                            }
                            #social ul li:hover span:nth-child(2) {
                              transform: translate(10px, -10px);
                              opacity: 0.6;
                            }
                            #social ul li:hover span:nth-child(1) {
                              transform: translate(0px, 0px);
                              opacity: 0.2;
                            }
                            #social ul li:nth-child(1) span {
                              background-color: #3b5999;
                            }
                            #social ul li:nth-child(2) span {
                              background-color: #55acee;
                            }
                            #social ul li:nth-child(3) span {
                              background-color: #e4405f;
                            }
                            #social ul li:nth-child(4) span {
                              background-color: #0077b5;
                            }

                            @-webkit-keyframes scroll {
                              0% {
                              -webkit-transform: translateX(0);
                              transform: translateX(0);
                              }
                              100% {
                              -webkit-transform: translateX(calc(-250px * 7));
                              transform: translateX(calc(-250px * 7));
                              }
                              }
                              @keyframes scroll {
                              0% {
                              -webkit-transform: translateX(0);
                              transform: translateX(0);
                              }
                              100% {
                              -webkit-transform: translateX(calc(-250px * 7));
                              transform: translateX(calc(-250px * 7));
                              }
                              }
                              #slider {
                              
                              box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
                              height: 100px;
                              margin: auto;
                              overflow: hidden;
                              position: relative;
                              width: 400px;
                              overflow: auto;
                              }
                              .slider::before, #slider::after {
                              background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
                              content: "";
                              height: 100px;
                              position: absolute;
                              width: 200px;
                              z-index: 2;
                              }
                              #slider::after {
                              right: 0;
                              top: 0;
                              -webkit-transform: rotateZ(180deg);
                              transform: rotateZ(180deg);
                              }
                              #slider::before {
                              left: 0;
                              top: 0;
                              }
                              #slider .slide-track {
                              -webkit-animation: scroll 60s linear infinite;
                              animation: scroll 60s linear infinite;
                              display: flex;
                              width: calc(250px * 14);
                              }
                              #slider .slide {
                              height: 100px;
                              width: 450px;
                              }
                              @media screen and ( max-width:360px){
                                .container #card .imgbx img{
                                  width: 150px;
                                }
                                #slider{
                                  width: 90px;
                                }
                              }
                              @media screen and ( max-width:700px){
                                #slider {
                                 
                                  max-width:250px;
                                }
                              }