*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    /* height: 7000px; */
    /* background-color: rgb(247, 245, 245); */
    perspective: 700px;
     font-family: Arial, sans-serif;
}

header{
    position: relative;
    padding-top: 7px;
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: auto;
    font-size: small;
}
.main-1{
}

 .main-1 li{
    display: inline;
    list-style: none;
}
.a-main{
    position: relative;
    text-decoration: none;
    color: black;
    padding: 0px 5px;
    text-align: center;
    display: inline-block;
}
.a-main::after{
    content: "";
    position: absolute;
    width: 1px;
    height: 0%;
    top: 0;
    left: 0;
    transition: .5s;
    background-color: rgb(0, 0, 0);
}
.a-main:hover::after{
   visibility: visible;
   width :1px;
   height: 100%;
   transition: 1s;
}
.a-main::before{
    content: "";
    position: absolute;
    width: 1px;
    height: 0%;
    bottom: 0;
    right: 0;
    transition: .5s;
    background-color: rgb(0, 0, 0);
}
.a-main:hover::before{
   visibility: visible;
   width :1px;
   height: 100%;
   transition: 1s;
}
.a-main-icon{

}
.a-main:hover .a-main-icon{
   transform: rotateY(360deg);
  transition: .8s;

}

.hr-header{
    margin: 7px 0px;
}
.a-main-icon-1:hover{color: blue;}
.a-main-icon-2:hover{color: rgb(201, 42, 42);}
.a-main-icon-3:hover{color: rgb(235, 23, 23);}
.a-main-icon-4:hover{color: rgb(92, 33, 169);}
.a-main-icon-5:hover{color: rgb(11, 108, 70);}

/* ////////////////////////////////////////////////////////////////////      section-1      /////*/
.section-1{
    width: 90%;
    margin: auto;
    height: 55px;
    line-height: 50px;

    display: grid;
    grid-template-columns:1fr 1.5fr 1fr;
    /* align-items: center; */
}
 /* logo */

.div2-s1{
    text-align: center;
    position: relative;   

}
.img-s1{
    width: 50px;
    height:50px;
    border-radius: 30px;
    background-color: black;
    background-image: url(../photos/7b98f719d532244be2fac0f39c6f369e\ \(1\).jpg);
    background-size: cover;
    display: inline-block;
}
h1{
     position: absolute;
     display: inline-block;
     padding-left: 10px;
     font-size:20px;
     font-family: s;
} 
.logo-span{
    color: rgb(0, 0, 0);
    font-family: Arial, sans-serif;
    font-size:15px;
    font-weight: 100;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

/* ........... list .............. */
.ul-s1 li {
    display: inline;
    list-style: none;
}

.a-s1 {
    position: relative;
    text-decoration: none;
    color: black;
    font-size: medium;
    display: inline;
    padding: 3px 7px;
}
.nav-span{

}

/* الحدود الأربعة */
.a-s1::before,
.a-s1::after,
.nav-span::before,
.nav-span::after {
    content: "";
    position: absolute;
    background-color: rgb(0, 0, 0);
    transition: 0.5s;
    z-index: -1;
}

/* الحد العلوي */
.a-s1::before {
    width: 0;
    height: 1px;
    top: 0;
    left: 0;
    transition-delay: 0.3s;
}

/* الحد السفلي */
.a-s1::after {
    width: 0;
    height: 1px;
    bottom: 0;
    right: 0;
    transition-delay: 0.1s;
}

/* الحد الأيسر */
.a-s1 .nav-span::before {
    width: 1px;
    height: 0;
    top: 0;
    left: 0;
    transition-delay: 0s;
}

/* الحد الأيمن */
.a-s1 .nav-span::after {
    width: 1px;
    height: 0;
    bottom: 0;
    right: 0;
    transition-delay: 0.2s;
}

/* تأثير الهوفر */
.a-s1:hover::before  {
    width: 100%;
    transition-delay: 0s;
}

.a-s1:hover::after {
    width: 100%;
    transition-delay: 0.2s;
}

.nav-span:hover::before {
    height: 100%;
    width: 1px;
    transition-delay: 0.3s;
}

.nav-span:hover::after {
    height: 100%;
    width: 1px;
    transition-delay: 0.1s;
}

/* dropdawn */

.icon-down {
    font-size: 12px;
}
.pages-drop {
    position: relative;
}

.dropdown{
    position: absolute;
    width: 230px;
    height: 180px;
    background-color: rgb(229, 236, 237);
    border-radius: 30px;
    font-size: small;
    transition: .7s;
    transform: scale(0);
    margin-top: 45px;
    right: 0%;
    display: inline-block;
    z-index: 100;
}
.dropdown-content{
  width:85%;
  margin: auto;
  


     display: grid;
     grid-template-columns: 2fr 1.5fr;
     grid-column-gap: 10px;
  
}
.dropdown-Pags{
}
.dropdown-Blog{
}

.dropdown-link{
    color: rgb(0, 0, 0);
    text-decoration: none;
    display: block;
    line-height: 30px;
    text-align: left;
}
.dropdown-link:hover{
  font-size: 12px;
  font-weight: 700;
}
.h4-drop{
       text-align: left;
}
.span-drop{
    width: 30px;
    height: .5px;
    background-color: black;
    display: block;
    margin-top: -13px;
}

.pages-drop:hover .dropdown{
    visibility: visible;
    transition: 1s;
 transform: scale(1);
}


/* ... icon ... */

.div3-s1{
    margin-left:auto ;
    position: relative;
}
.s1-icon{
    color: black;
    padding: 3px 5px;
    font-size: larger;
}
.s1-icon:hover{
    color: rgb(130, 130, 130);
}
.circle{
  position: absolute;
  width: 15.5px;
  height: 15.5px;
  background: #0d9240; 
  border-radius: 50%; 
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; 
  font-weight: bold;
  top: 4.5px; 
  right: 5px; 
  z-index: -1;
   transition: .5s;
}
.car:hover + .circle {
  top: -1.5px;
  transition: .5s;
}
/* sale */
.Banner{
    width: 100%;
    height: 25px;
    background-color: black;
}
.sale{
    color: azure;
    text-align: center;
    line-height: 25px;
    font-size: 12px;
    color: rgb(222, 222, 222);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    white-space: 2px;
}
.a-shop{
    color: rgb(193, 189, 189);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-style: italic;
    padding: 0px 4px;
    font-size: 13px;
    text-decoration: none;
    text-decoration: underline;
    transition: .5s;
    display: inline-block;
   
}
.a-shop:hover{
    letter-spacing: 2px;
    transition: .5s;
}

/* ....................................section3................................. */

.section-3{
   
    height: 100vh;
    display: grid;
    grid-template-columns:1fr  1fr;
}
.Headline-contanr{
    text-align: center;
   position: relative;
}
.Main-Headline{
   width: 90%;
   position: absolute;
    content: "";
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%); 
    width: 750px;
    margin-left: 80px;
    transition: 1s;

    animation-name: change;
   animation-duration: 1s;
   animation-timing-function:ease-in-out ;
   animation-fill-mode: forwards;
   z-index: 1;
}
@keyframes change{
    0%{
        opacity: 0;
    }
    25%{
       opacity: 0;
    }
    50%{
      opacity: .6;
    }
    70%{
        opacity: .7;
         
    }
    100%{
        top: 50%;
    }
}

.p-Headline{
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-size: larger;
   font-weight: 100;
   height: 50px;
    font-style: italic;

}


.h3-Headline{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: 900;
    font-size: 40px;
    height:70px;
    letter-spacing: 1px;
}
.Subtext-Headline{
    color: rgb(64, 64, 64);
    line-height: 20px;
}
.btn-shop{
    width: 100px;
    height: 40px;
    margin-top: 40px;
    border-radius: 6px;
    border: .2px solid darkgrey;
}
.btn-shop:hover{
    background-color: #1111111d;
}

.background{
    width: 100%;
    height: 100%;
    background-image: url(../photos/cba82b01955c0e9698e192e7a19e3ea2.jpg);
    background-size: cover;

}


/* ......................  section-4  ........................... */
.section-4{
    height: 540px;
    width: 90%;
    margin: auto;
    margin-top: 50px;
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-column-gap: 30px ;
}
.Cover{
   position: relative;
   height: 400px;
   overflow: hidden;
   box-shadow: 0 30px 60px 10px rgba(0, 0, 0, 0.6);
      border-radius: 10px;

      
}

.Gender{
   position: absolute;
   width: 100%;
   height:100%;
   background-size: cover;
   text-align: center;
   /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);  */
   box-shadow: inset 0 -70px 40px -10px rgba(0, 0, 0, 0.6);
 
   transition: .5s;

}
.text-Gender{
  text-align: center;
  transition: .5s;
}
.h3-Gander{
    margin-top: 97%;
    font-size: larger;
    font-weight: bolder;
    color: rgb(239, 239, 239);
    
}
.shop-now{
   color: rgb(235, 228, 220);
   display: block;
   margin-top: 30px;
   transition: 1s;
   text-decoration: underline;
   cursor: pointer;
}
.Gender:hover{
       transform: scale(1.1,1.1);
       transition: .5s;
}
.Gender:hover .text-Gender{
    margin-top: -30px;
     transition: .5s;
}
.Gender:hover .shop-now{
     margin-top: 15px;
     transition: 1.5s;
}

.Gender-man{
    background-image: url(../photos/cc02292a85bc1cf601e061d2e7c5f5ab.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.Gender-women {
    background-image: url(../photos/d7add1ba8aca6b9f80475d5316cb3830.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.Gender-Hijab{
    background-image: url(../photos/d9265cf4c7f984aebd9b71884bca3395.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

/* .................  section-5  ...................... */

.section-5{
    width: 90%;
    height: 40px;
    margin: auto;
    margin-top: 120px;

    display: grid;
    grid-template-columns:1fr  1fr;
    font-size: medium;
}
.post-week{
   font-weight: lighter;
   font-size: larger;
   letter-spacing: 5px;
   word-spacing: 4px;
   
}
.VANTA{
    font-weight: bold;
    font-size: larger;
    font-family: s;
}
.Type{
    text-align: right;
    letter-spacing: 2px;
}
.WOMEN{

    font-weight: bold;
    font-size: larger;
    display: inline-block;
    height: 49px;
    width: 100px;
    text-align: center;
    position: relative;
}
.WOMEN::after{
  
    position: absolute;
    content: "";
    width: 100%;
    height: 5px;
    bottom: 0;
    right: 0;
    background-color: black;
    border-radius: 40px;
}

/* ................ section-6 .................. */
.section-6{
    width: 90%;
    height: 680px;
    margin: auto;
    margin-top: 50px;
    
    display: grid;
    grid-template-columns:1fr  1fr  1fr  1fr;
    grid-column-gap: 7px;

    transform-style: preserve-3d;
    position: relative;
}

.card-week{
    height: 420px;
    background-size: cover;
    position: relative;
    
}
.back-card{
   width: 100%;
   height: 100%;
   position: absolute;
   visibility: hidden;
   transform: rotateY(270deg);
   
   transition: .5s;
}

.card-week:hover .back-card{
    transform: rotateY(180deg);
    transition: 1s;
    visibility: visible;
} 

.text-week{
    text-align: center;
    margin-top: 440px ;
    font-size: small;
}
.h3-week{
    font-weight: lighter;
    transition: .5s;
}
.card-week:hover .h3-week{
    font-weight: bolder;
    transition: .1s;
}
.span-price{
    color: rgb(201, 42, 42);
    text-decoration: line-through;
    font-size: smaller;
}
.product-actions{
   width: 100%;
   margin-top: 385px;
   visibility: hidden;
   opacity: 0;
   position: absolute;
   text-align: center;
    transition: .7s;
}
.icon-week{
    height: 28px;
    width: 35px;
    border-radius: 10px;
    border: none;
    font-size: medium;
    line-height: 30px;
    background-color: rgba(232, 232, 232, 0.895);
    text-align: center;
   
}
.icon-week:hover{
   font-size:large;
   cursor: pointer;
}

.card-week:hover .product-actions{
    visibility: visible;
    transition: 1s;
    opacity: 1;
    margin-top: 375px;
}
.card-week-1{
   background-image: url(../photos/oooooooooo/Althea_Lipstick_Red_1760_47024444-d483-4eff-93e3-c21dcc797f61.webp);
   background-size: cover;
}
.back-1{
   background-image: url(../photos/oooooooooo/Althea_lipstick_red_packshot_shopify.webp);
   background-size: cover;
}

.card-week-2{
   background-image: url(../photos/oooooooooo/Bleeker-Syrup_2_cf0be282-96cc-4055-b3f0-f93fc4bd038a.webp);
}
.back-2{
   background-image: url(../photos/oooooooooo/Bleeker-Syrup-Packshot-Shopify_1.webp);
   background-size: cover;
}

.card-week-3{
   background-image: url(../photos/oooooooooo/Hatti_Oak_1101_e1dae151-9bdf-41d6-87c5-646c132b9b35\ \(1\).webp);
}
.back-3{
   background-image: url(../photos/oooooooooo/Hatti-oak_packshot_shopify_ca5152c6-8502-49e0-a26c-024b6a324a64.webp);
   background-size: cover;
}

.card-week-4{
   background-image: url(../photos/oooooooooo/Tate-mocha_4.webp);
}
.back-4{
   background-image: url(../photos/oooooooooo/Tate-mocha-packshot-shopify.webp);
   background-size: cover;
}


.slider-arroww {
  position: absolute;
  display: inline-block;
  font-size: 50px;
   line-height: 420px;
  cursor: pointer;
}
.left-arroww {
  left: -25px;
}
.right-arroww {
  right: -25px;
}
/* ............................  .section-7  .................................. */
.section-7{
    width: 100%;
    height: 350px;
    border: 1px solid darkgray;
    background-color: rgba(238, 242, 242, 0.322);
}
.s7-cntaner{
    width: 90%;
    height: 100%;
    position: relative;
    margin: auto;
    text-align: center;
}
.slider-arrow {
  position: absolute;
  display: inline-block;
  font-size: 50px;
   content: "";
    top: 50%;
    transform: translate(-50%, -50%);
  cursor: pointer;
}
.left-arrow {
  left: 10px;
}
.right-arrow {
  right: 10px;
}
.testimonial-text{
   position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 25px;
}
.h2-Customer{
    padding-top: 40px;
    font-size: 30px;
    font-family: s;
}
.testimonial-text{
    color: rgb(109, 109, 109);
    font-size: larger;
    width: 100%;
    line-height: 30px;
}
.testimonial-person{
    height: 60px;
     position: absolute;
    content: "";
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.Customer-Photo{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-image: url(../photos/karina-tess-Tupz7k-JziU-unsplash-e.jpg);
    background-size: cover;
    display: inline-block;
}
.testimonial-person-info{
    display: inline-block;
    text-align: left;
    transform: translate(5px,-50%);
}
/* .........................section-8.................................... */
.h2-maylike{
    text-align: center;
    margin-top: 100px;
    font-size: 30px;
    font-family: s;
}
.section-8{
    width: 90%;
    height: 640px;
    margin: auto;
    margin-top: 50px;
    
    display: grid;
    grid-template-columns:1fr  1fr  1fr  1fr;
    grid-column-gap: 7px;

    transform-style: preserve-3d;
    position: relative;
}

.card-like {
    height: 420px;
    background-size: cover;
    position: relative;
    transition: 1s;
}
.card-like::after{
    position: absolute;
    content: "";
    width: 100%;
    height: 0%;
    top: 0;
    bottom: 0;
    opacity: 0;
    
}
.card-like:hover::after{
    width: 100%;
    height: 100%;
    transition: .7s;
    opacity: 1;
}
/* .......................card-like-1............................... */

.card-like-1{
   background-image: url(../photos/oooooooooo/ALTHEAIVORY1.webp);
}
.card-like-1::after{
    transition: .5s;
    background-image: url(../photos/oooooooooo/ALTHEAIVORY3.webp);
    background-size: cover; 
}
.card-like-1:hover::after{
    width: 100%;
    height: 100%;
    transition: .7s;
   
    background-size: cover;
}

/* .......card-like-2........ */
.card-like-2{
   background-image: url(../photos/oooooooooo/Layne-black_1.webp);
}
.card-like-2::after{
    transition: .5s;
    background-image: url(../photos/oooooooooo/Layne-black_2.webp);
    background-size: cover; 
}
.card-like-2:hover::after{
    width: 100%;
    height: 100%;
    transition: .7s;
    
}

/* .card-like-3 */

.card-like-3{
   background-image: url(../photos/oooooooooo/Kerri-camel_3.webp);
}
.card-like-3::after{
    transition: .5s;
    background-image: url(../photos/oooooooooo/Kerri-camel_5.webp);
    background-size: cover; 
}
.card-like-3:hover::after{
    width: 100%;
    height: 100%;
    transition: .7s;
    
}
/* .card-like-4 */
.card-like-4{
   background-image: url(../photos/oooooooooo/Remi_Skirt_Suede_Tobacco_1577.webp);
}.card-like-4::after{
    transition: .5s;
    background-image: url(../photos/oooooooooo/Remi_Skirt_Suede_Tobacco_1619.webp);
    background-size: cover; 
}
.card-like-4:hover::after{
    width: 100%;
    height: 100%;
    transition: .7s;
   
    background-size: cover;
}

.s8-icons{
    position: absolute;
    width: 100%;
   text-align: center;
   margin-top: 385px;
   visibility: hidden;
   opacity: 0;
   transition: 1s;
   z-index: 10;
}

.card-like:hover .s8-icons{
   visibility: visible;
   opacity: 1;
   transition: 1s;
   margin-top: 383px;
}
.icon-like{
    height: 28px;
    width: 35px;
    border-radius: 10px;
    border: none;
    font-size: medium;
    line-height: 30px;
    background-color: rgba(232, 232, 232, 0.895);
    text-align: center;
}
.icon-like:hover{
   font-size:large;
   cursor: pointer;
}

.text-like{
    text-align: center;
    margin-top: 440px;
    font-size: small;
}
.h3-week{

}
.card-like:hover .h3-week{
   font-weight: bold;
   transition: .5s;
}
/* ........................... section-9 .............................. */
.section-9{
    width: 90%;
    height:700px;
    margin: auto;

    display: grid;
    grid-template-columns:1fr  1fr  1fr;
    grid-column-gap: 7px;
}
.s9-titiel{
    text-align: center;
    padding-top: 50px;
    font-size: 30px;
    font-family: s;
}
.contaner-news{
    margin: auto;
    width: 370px;
    height: 570px;
    border: 1px solid darkgray;
    border-radius: 5px;
}
.img-cover{
    margin: auto;
    margin-top: 25px;
    width: 325px;
    height: 380px;
    box-shadow: 0 30px 30px rgba(0, 0, 0, 0.3); 
   box-shadow: 0 10px 40px 5px rgba(0, 0, 0, 0.6);
    /* overflow: hidden; */
      border-radius: 4px;
}
.s9-img{
    width: 100%;
    height: 380px;
    border-radius: 4px;
   transition: .5s;
}
.s9-img:hover{
    transform: scale(1.1,1.1);
    transition: .5s;
}

.s9-img-1{
     background-image: url(../photos/6ddbf4bdb62ee197e93d0854dfdf9604.jpg);
   background-size: cover;
}
.s9-img-2{
   background-image: url(../photos/e98fc43e6e6ef35df93abfb96f5bacbb.jpg);
   background-size: cover;
}
.s9-img-3{
   background-image: url(../photos/9b7708753a1a73692087b7e5367e8c86.jpg);
   background-size: cover;
}
.s9-info{
     margin: auto;
    margin-top: 30px;
    width: 330px;
    height: 400px;
    line-height: 25px;
    z-index: 3;
}
.s9-span{
    font-size: small;
    font-weight: 100;
    color: rgba(0, 0, 0, 0.724);
}
.s9-h4{}
.s9-p{
    font-size: small;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.724);
}
.s9-a{
    color: #111;
    font-size: 14px;
    transition: .5;
}
.s9-a:hover{
    font-size: medium;
    transition: .5;
}
/* ..........................  section-10  ........................... */
.section-10{
    width:100%;
    height: 280px;
    margin: auto;

    display: grid;
    grid-template-columns:1fr  1fr  1fr 1fr;
    grid-column-gap: 7px;
}
.s10-div {
    color: black;
    text-align: center;
    margin-top:50px;
    height: 140px ;
    overflow: hidden;
    position: relative;
}
.covtaner-info{
    margin-top: 80px;
}
.s10-icon{
    font-size: 37px;
    position: absolute;
    width: 100%;
    margin-top: 18px;
    transition:.3s;
    color: #686868;
}
.s10-icon-2{
    position: absolute;
    opacity: 0;
    width: 100%;
    margin-top: 50px;
    font-size: 37px;
    transition: .3s;
    overflow: hidden;
}
.s10-div:hover  .s10-icon{
  margin-top: -50px;
  transition: .3s;
  opacity: 0;
}
.s10-div:hover  .s10-icon-2{
  margin-top: 20px;
  transition: .3s;
  opacity: 1; 
}

.s10-h5{
    margin-top: 15px;
    font-size: medium;
}
.p10-p{
    font-size: small;
    font-weight: 100;
    margin-top: 10px;
    color: rgb(134, 134, 134);
}

/* .................................................. */
footer {
    /* width: 90%; */
    /* margin: auto; */
  background-color: #111;
  color: #fff;
  padding: 40px 0px;
  font-family: Arial, sans-serif;
}
.contaner-s11{
    width: 90%;
    margin: auto;
}

/* Newsletter Section */
.footer-grid-1{
    margin: auto;
      display: grid;
    grid-template-columns:1fr  1.5fr  .5fr;
    grid-column-gap: 7px;
}
.s11-title-1{

}
.newsletter-section {
  text-align: center;
  margin-bottom: 30px;

}

.newsletter-title {
  font-size: 24px;
  margin-bottom: 10px;
  
}

.newsletter-text {
  font-size: small;
  color: darkgray;
  /* padding: 3px 0px; */
  /* margin-bottom: 20px; */
}


.newsletter-input {
  padding: 10px;
  width: 250px;
  border: none;
  border-radius: 5px;
  
}

.newsletter-button {
 color: rgb(255, 255, 255);
 background-color: #b0a58c84;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
   box-shadow: inset 0 -10px 10px -1px rgba(49, 48, 47, 0.6);
}
.s11-icon{

    text-align: right;
}
.s11-icon-1{
    margin: 20px 5px;
    color: #ffffff75;
    font-size: large;
}
.s11-icon-1:hover{
    color: #ffffff;
}
.hr-footer{
    margin-top: 20px;
    color: rgba(4, 3, 3, 0.176);
}
/* Footer Grid Layout */
.footer-grid {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); */

  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 30px;
  margin-top: 30px;
}

/* Logo */
.img-s11{
    width: 60px;
    height:60px;
    border-radius: 30px;
    background-color: black;
    background-image: url(../photos/7b98f719d532244be2fac0f39c6f369e\ \(1\).jpg);
    background-size: cover;
    display: inline-block;
}
.s11-info{
    display: inline-block;
    padding-left: 20px;
}
.footer-logo{
   
}
.footer-logo .logo-title {
  font-size: 20px;
  margin-bottom: 10px;
  font-family:s;
}

.logo-title .logo-text {
  font-size: 14px;
  display: inline;
  float: right;
}
.logo-text{
    color: darkgrey;
    font-size: small;
}
/* Links Sections */
.footer-links .links-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.footer-links .links-list {
  list-style: none;
  padding: 0;
}

.footer-links .links-list li  {
  margin-bottom: 6px;
  font-size: 14px;
  cursor: pointer;
  color: darkgray;
}

/* Optional Hover Effects */
.footer-links .links-list li:hover{
  color: #d0d0d0;
   text-decoration: underline;
}
.newsletter-button:hover{
 color: rgb(255, 255, 255);
 background-color: #918875d1;
}
.s11-div{
    width: 100%;
    height: .2px;
    background-color: rgb(126, 126, 126);
    margin: 20px 0px;
}
.s11-v{
    text-align: center;
    font-size: 10px;
}

.s11-span{
    font-family: s;
    font-size:12px ;
    margin: 0px 3px;
    display:inline-block;

   animation-name:vanta;
   animation-duration: 2s;
   animation-iteration-count: infinite;
   animation-timing-function:ease-in-out ;
   animation-fill-mode: forwards;
}
@keyframes vanta{

    from {
        color: #333333;
    }
    to{
        color: #ffffff;
    }
}