/* start header */
.head {
    .row {
        width: 100%;
        height: 130px;
        /* background-color: blue; */
        /* border: 2px solid red; */
        display: flex;

        >nav {
            padding: 40px 100px;
            background-color: #fcf7f6;

            &:first-of-type {
                width: 30%;
                /* border: 2px solid black; */
            }

            &:last-of-type {
                width: 70%;
                display: flex;
                /* border: 2px solid red; */

                >ul {
                    display: flex;
                    gap: 40px;
                    padding-right: 50px;
                    /* position: relative; */

                    >li {
                        position: relative;

                        &:hover {
                            >ul {
                                height: 350px;
                            }
                        }

                        >a {
                            /* font-family: Inter, Arial, Helvetica, sans-serif; */
                            font-size: 20px;
                            display: inline-flex;
                            align-items: center;
                            color: black;
                            gap: 2px;



                            >svg {
                                width: 16px;
                                height: 16px;
                            }

                            &:hover {
                                color: #f1642b;
                            }


                        }

                        >div {
                            width: 700px;
                            height: 500px;
                            /* background-color: red; */
                            position: absolute;
                            z-index: 999;

                            >ul {
                                transition: 1s;
                                width: 100%;
                                height: 0;
                                overflow: hidden;
                                background-color: red;
                                /* position: absolute; */
                                top: 100px;
                                right: 0;

                                >li {
                                    width: 100%;
                                    height: 100%;

                                    >div {

                                        width: 100%;
                                        padding: 20px 10%;

                                        >* {
                                            color: white;
                                            text-align: center;
                                            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                                        }

                                        &:nth-of-type(1) {
                                            background-color: blue;
                                        }

                                        &:nth-of-type(2) {}

                                        &:nth-of-type(3) {}
                                    }
                                }
                            }


                        }

                    }

                }

                >button {
                    background-color: #f1642b;
                    color: white;
                    border: none;
                    width: 180px;
                    height: 50px;
                    border-radius: 5px;
                    padding: 10px 20px;
                    font-size: 20px;

                }
            }
        }
    }
}

.head_content {

    width: 100%;
    display: flex;
    background-image: url(../img/bgheader.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;

    >div {
        /* position: relative; */

        &:first-of-type {
            width: 45%;

            padding: 50px 30px;
            background-color: #00000000;
            /* border: 2px solid black; */

            >.navcontect {
                margin: 30px 100px;
                width: 400px;
                height: 300px;
                /* background-color: red; */

                >h1 {
                    margin-top: 50px;
                    color: #3b3a64;
                    font-family: "Times New Roman", Times, serif;
                    margin-top: 50px;
                    font-size: 45px;
                }

                >p {

                    color: #3b3a64;
                    margin-top: 20px;
                    font-size: 20px;
                }

                >button {
                    background-color: #3b3a64;
                    color: white;
                    width: 120px;
                    height: 50px;
                    margin-top: 50px;
                    border-radius: 5px;
                    border: none;
                    font-size: 15px;
                    text-transform: capitalize;
                }
            }

            >img {

                width: 50px;
                height: 0;

            }

        }

        &:last-of-type {
            width: 55%;
            position: relative;

            >img {
                width: 100%;
                height: 500px;
            }
        }
    }
}

.sectionhead{
    width: 100%;
    height: 150px;
    background-color: lab(99.73% 0.33 0.11);
    /* padding: 100px 50px; */
    >h1{
        width: 700px;
       /* background-color: rgb(182, 38, 38); */
       color: #3b3a64;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        font-family: Georgia, 'Times New Roman', Times, serif;
        padding-left: 15px;
        text-transform: capitalize;
        padding-top: 15px;
        margin-top: 5%;

    }
    >p{
        width: 700px;
        margin: auto;
        /* background-color: blue; */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        margin-top: 10px;
        color: #3b3a64;
    }
}
/* end header */

/* start of cart bottom header */
.row
{
    >.row
    {
        width: 100%;
        height:320px;
        /* border: 1px solid red; */
        background-color:rgb(252,247,246);
        margin-top:90px;
        >div
        {
            width: 100%;
            margin:10px 100px;
            /* border:1px solid black; */
            display: flex;
            align-items: center;
            justify-content: center;
          >.card
          {
            width:33%;
            height: 280px;
            margin: 10px 10px;
            border:1px solid purple;
            border-radius:5px;
            background-color:rgb(255,255,255);
            position: relative;
            &:nth-child(1)
            {
              >:nth-child(1)
              {
                margin-top:50px;
                margin-left:25px;
                >strong
                {
                   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                   font-size:13px;
                }
              }
              >:nth-child(2)
              {
                >p
                {
                  padding:10px 0 30px 25px;
                  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                }
              }
              >:nth-child(3)
              {
                  margin-left:40px;
                  height: 40px;
                  width: 100px;
                  background-color:rgb(237,164,68);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-radius:10px;
                  >a
                  {
                    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                    font-size: 13px;
             
                  }
                  
              }
            }
            &:nth-child(2)
            {
               position: relative;
               background-color:rgb(91,79,104);
             
              >:first-of-type
              {
                width:150px;
                height: 150px;
                /* border:1px solid brown; */
                position:absolute;
                bottom:-16px;
                left:40px;
                z-index:2;
                >figure
                {
                >img
                  {
                    width: 100%;
                    height: 100%;
                    object-fit:cover;
                  }
                }
                
              }
              >:last-of-type
              {
                width: 150px;
                height: 150px;
                /* border:1px solid brown; */
                position:absolute;
                bottom:-43px;
                left:70px;
                >div
                {
                  position: relative;
                  z-index:1;
                  >img
                  {
                    width: 100%;
                    height: 100%;
                    object-fit:cover;
                   
                
                  }
                }
                
            
              }
            >h3
              {
                position:absolute;
                top:20px;
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                margin:10px auto;
                color:white;
              }
              >h5
              {

                position:absolute;
                top:100px;
                color:white;
                padding-top:10px;
              } 
            }

            &:nth-child(3)
            {
              background-image:url(../image/info-bg.jpg);
              background-size: cover; 
              >p
              {
                &:first-of-type
                {
                  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                  font-size:22px;
                  margin:25px 30px;
                  color:white;
                  position: relative;
                  z-index:3;
                  >strong
                  {
                    color:rgb(180,134,64);
                  }
                }
                &:last-of-type
                {
                  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                  font-size: 20px;
                  color:white;
                  margin-left:30px;
                  position: relative;
                  z-index:4;
                }

              }
            
                &:after
                {
                content:'';
                width: 100%;
                height: 100%;
                background-color:rgba(35, 36, 36, 0.492);
                position:absolute;
                top:0;
                right:0;
                }
              }
            }
  
          }
   
        }
}
/* end of cart bottom header */

/* create cart with z-index */
main {
    width: 100%;
    height: 1000px;
    background-color: lab(99.73% 0.33 0.11);
    display: flex;
    >.maincontent 
    {
        width: 100%;
        height: 700px;
        /* display: flex; */
        justify-content: center;
        align-items: center;
        /* background-color: red; */
        margin: 100px auto;
        flex-wrap: wrap;
        gap: 20px;
        >.part1{
            display: flex;
            >div {
            width: 80%;
            height: 400px;
            /* background-color: black; */
            display: flex;
            padding: 0 7%;
            position: relative;
            
            >img {
                width: 400px;
                height: 400px;
                position: relative;
                z-index: 0;
            }

            >div {
                

                &:hover {
                    left: 2px;
                    transition: 2s;
                    position: absolute;

                    >h5 {
                        color: #f1642b;
                    }

                }

                &:first-of-type {
                    width: 300px;
                    height: 300px;
                    background-color: whitesmoke;
                    position: absolute;
                    z-index: 1;
                    margin: 10px 300px;
                    padding-left: 30px;
                    padding-top: 50px;
                }

                >p {
                    &:first-of-type {
                        color: #76c19c;

                    }

                    &:last-of-type {
                        color: #f1642b;

                        font-size: 16px;
                        margin-top: 20px;
                    }
                }

                >h5 {
                    width: 300px;

                    font-size: 30px;
                    font-family: 'Times New Roman', Times, serif;
                    margin-top: 15px;
                }

            }
        }
        }
        >.part2{
            display: flex;
            display: flex;
            margin-top: 50px;
            >div {
            width: 80%;
            height: 400px;
            /* background-color: black; */
            display: flex;
            padding: 0 7%;
            position: relative;
            
            >img {
                width: 400px;
                height: 400px;
                position: relative;
                z-index: 0;
            }

            >div {
                

                &:hover {
                    left: 2px;
                    transition: 2s;
                    position: absolute;

                    >h5 {
                        color: #f1642b;
                    }

                }

                &:first-of-type {
                    width: 300px;
                    height: 300px;
                    background-color: whitesmoke;
                    position: absolute;
                    z-index: 1;
                    margin: 10px 300px;
                    padding-left: 30px;
                    padding-top: 50px;
                }

                >p {
                    text-transform: capitalize;
                    &:first-of-type {
                        color: #76c19c;

                    }

                    &:last-of-type {
                        color: #f1642b;

                        font-size: 16px;
                        margin-top: 20px;
                    }
                }

                >h5 {
                    width: 300px;
                    text-transform: capitalize;
                    font-size: 30px;
                    font-family: 'Times New Roman', Times, serif;
                    margin-top: 15px;
                }

            }
        }
        }
        
    }
    }
/* start footer */
footer {
    width: 100%;
    height: 720px;
    background-color: #fcf7f6;

    >.row {
        display: flex;
        justify-content: center;
        align-items: center;
      /* background-color: blue; */
      width: 100%;
      height: 120px;
      margin-top: 150px;
        >div {

            width: 100%;
            height: 100px;
            background-color: #fcf7f6;
            padding: 40px 60px;
            gap: 20px;
            display: flex;
            justify-content: center;
            align-items: center;

            &:nth-of-type(1) {
                width: 20%;
                /* border: 2px solid yellow; */
                /* margin-left: 15%; */
                

                >img {
                    margin-top: 20px;

                }
            }

            &:nth-of-type(2) {

                width: 30%;

                /* border: 2px solid yellow; */
                color: #3b3a64;
                font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
                display: flex;
                justify-content: center;
                align-items: center;

                >h4 {
                    font-size: 20px;
                    font-family: Georgia, 'Times New Roman', Times, serif;
                }
            }

            &:nth-of-type(3) {
                width: 20%;
                /* background-color: ; */
                /* border: 2px solid yellow; */
                display: flex;
                justify-content: center;
                align-items: center;

                >button {
                    border: none;
                    background-color: #3b3a64;
                    color: white;
                    width: 230px;
                    height: 80px;
                    /* margin-left: 30%; */
                    font-size: 20px;
                    border-radius: 5px;
                    text-transform: capitalize;
                }
            }
        }
      
    }

    >.footercontent {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 200px;
        /* border: 5px solid red; */

        >div {
            display: flex;
            justify-content: center;
            align-items: center;

            &:first-of-type {

                width: 10%;
                height: 50px;
                /* border: 1px solid black; */
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: white;

                >span {
                    background-color: whitesmoke;
                    /* border: 1px solid black; */
                    color: #3b3a64;
                    background-color: white;

                }

            }

            &:last-of-type {
                border: 2px solid rgba(62, 58, 59, 0.078);
                width: 65%;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;

                >marquee {
                    text-transform: capitalize;
                    /* border: 1px solid purple; */
                }

            }
        }
    }

    >.list {
        width: 100%;
        height: 300px;
        border: 2px solid peru;
        display: flex;
        justify-content: center;
        align-items: center;
        /* gap: 50px; */
        padding: 0 100px;

        >ul {
            &:nth-of-type(1) {
                width: 20%;

                >h3 {
                    color: #3b3a64;
                    padding-bottom: 30px;
                    text-transform: capitalize;
                }

                >li {
                    color: #3b3a64;
                    padding-top: 10px;
                    cursor: pointer;
                    text-transform: capitalize;

                }
            }

            &:nth-of-type(2) {
                width: 20%;

                >h3 {
                    color: #3b3a64;
                    padding-bottom: 30px;
                    text-transform: capitalize;
                }

                >li {
                    color: #3b3a64;
                    padding-top: 10px;
                    cursor: pointer;
                    text-transform: capitalize;

                }

            }

            &:nth-of-type(3) {
                width: 20%;

                >h3 {
                    color: #3b3a64;
                    padding-bottom: 30px;
                    text-transform: capitalize;
                }

                >li {
                    color: #3b3a64;
                    padding-top: 10px;
                    cursor: pointer;
                    text-transform: capitalize;

                }

            }

            &:nth-of-type(4) {
                width: 20%;

                >h3 {
                    color: #3b3a64;
                    padding-bottom: 30px;
                    text-transform: capitalize;
                }

                >li {
                    color: #3b3a64;
                    padding-top: 10px;
                    font-family: Georgia, 'Times New Roman', Times, serif;
                    display: flex;
                    cursor: pointer;
                    gap: 7px;
                    text-transform: capitalize;

                    >svg {
                        width: 25px;
                        height: 25px;


                    }


                }

            }
        }
    }

    >.avada {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;

        >div {
            padding-top: 10px;

            &:first-of-type {
                >p {
                    font-size: 13px;
                    color: #3b3a64;
                }
            }

            &:last-of-type {
                display: flex;
                justify-content: center;
                align-items: center;

                >ul {
                    padding-left: 5px;
                    display: flex;
                    gap: 20px;
                    color: #3b3a64;

                    >li {
                        list-style-type: disc;
                        /* background-color: red; */
                        font-size: 13px;

                    }
                }
            }
        }
    }
   .reza
   {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: end;
    border:1px solid red;
    margin-top: 100px;
    /* background-image: url(../image/bg.jpg); */
    >div{
      >.part1{
           >.ahmadiphoto
    {
        width: 100px;
        height: 170px;
        border-radius:50px;
        border:1px solid brown;
        position:fixed;
        bottom:0;
        right: 0;
        z-index:10;
        >img
        {
          width: 100px;
          height: 100%;
          object-fit: cover;
          border-radius:30px;
        }
    }
      }
      >.part2{
          >.ahmadiyanphoto{
       width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: start;
    border:1px solid red;
    >img
        {
          width: 200px;
          height: 200px;
          object-fit: cover;
          border-radius:30px;
        }
    }
      }
    }
 
  
    
    
   }
     >.footerphoto{
          width: 100%;
          height: 550px;
          /* background-color: rgb(82, 103, 81); */
          background-image: url(../image/bgfooter.jpg);
          background-repeat: no-repeat;
          display: flex;
          margin-top: 10px;
          >div{
            display: flex;
            background-color: #17171907;
            width: 100%;
            height: 100%;
            
            &:nth-of-type(1){
              width: 30%;
            border: 2px solid salmon;
             display: flex;
              justify-content: center;
              align-items: center;
              transition: transform 0.5s ease;
             >div{
              width: 500px ;
              height: 500px;
              background-color: gainsboro;
              border-radius: 88% 12% 79% 21% / 2% 100% 0% 98%   ;
              transition: all 1.5s ease-in-out;
              overflow: hidden;
              animation: morph 6s ease-in-out infinite;
              &:hover{
                border-radius: 50% 50% 70% 30% / 30% 70% 40% 60%;
                transform: rotate(8deg) scale(1.05s);
              }
               

              >img{
              width: 100%;
              height: 500px;
              border-radius: 130%;
              border-radius: 50%;
              object-fit: cover;
              border-radius: inherit;
              transition: all 1.5s ease-in-out;
              
              &:hover{
                transform: translateX(-20px);
              }
             
            }
             }

            }
            &:nth-of-type(2){
              width: 40%;
            /* border: 2px solid salmon; */
            >div{
              display: block;
              margin-left: 50px;
              margin-top: 100px;
              padding-left: 15px;
              transition: transform 0.5s ease;
              >*{
                color: whitesmoke;
                 &:hover{
              color: goldenrod;
              transform: translateX(-20px);
             
            }
              }
              >h1{
                display: block;
              }
              >h4{
                margin-top: 8px;
              }
              >p{
                margin-top: 8px;

              }
              >h4{
                margin-top: 8px;

              }
              >ul{
                margin-top: 8px;
                padding-left: 10px;
                >li{
                  list-style-type: disc;
                  font-size: 20px;
                }
              }
              >p{

              }
              >h2{
                margin-top: 15px;
                &:hover{
                  color: black;
                  background-color: rgb(60, 49, 49);
                  transform: translateX(-20px);
                }
              }
            }
           

            }
            &:nth-of-type(3){
            width: 30%;
            border: 2px solid salmon;
             display: flex;
              justify-content: center;
              align-items: center;
              transition: transform 0.5s ease;
            >div{
              width: 500px;
              height: 500px;
              background-color: gainsboro;
              border-radius: 50% 50% 70% 30% / 30% 70% 40% 60%;
              transition: all 1.5s ease-in-out;
              overflow: hidden;
              animation: morph 6s ease-in-out infinite;
              &:hover{
                border-radius: 50% 50% 70% 30% / 30% 70% 40% 60%;
                transform: rotate(8deg) scale(1.05s);
              }
               >img{
              width: 100%;
              height: 500px;
              border-radius: 100%;
              object-fit: cover;
              border-radius: inherit;
              transition: all 1.5s ease-in-out;
              &:hover{
                transform: translateX(-20px);
              }
            }
            }


            }
          }
          
        }
}
/* end footer */


/* start cart2 */
.row
{
  >.cart2
  {
    width: 100%;
    height: 410px;
    display: flex;
    padding:20px;
    background-size:cover;

    >div
    {
      width: 100%;
      height: 100%;
      /* border:1px solid black; */
      display: flex;
      /* background-color:rgb(252,247,246); */

      >:first-of-type
      {
        width: 50%;
        height: 350px;
        margin:5px;
        /* border:1px solid purple; */
        >h3
        {
          padding:40px 0 10px 20px;
          font-size: 33px;
          color:rgb(59,58,100)
        }
        >p
        {
          padding:15px 30px 30px 20px ;
          font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
          color:rgb(59,58,100)

        }
        >div
        {
          width: 150px;
          height: 40px;
          background-color:rgb(59,58,100);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left:20px;
          >a
          {
            color:white;
            border-radius: 15px;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            font-size: 11px;
            
          }
        }
      }
      >:last-of-type
      {
        width: 50%;
        margin:35px 50px 0 0;
        >figure
        {
          
          >img
          {
            width: 100%;
            height: 100%;
            object-fit:cover;
            border-radius: 15px;
          }
        }
      }
    }
  }
  >.bg-image
  {
    background-image:url(../image/hero-graphic-3.jpg);
  }
  >.bg-color
  {
    background-color:white;
  }
}
/* end of cart2 */


/* start cart3 */
.row
{
  >.cart3
  {
    width: 100%;
    height: 410px;
    display: flex;
    padding:20px;
    background-size:cover;

    >div
    {
      width: 100%;
      height: 100%;
      /* border:1px solid black; */
      display: flex;
      /* background-color:rgb(252,247,246); */

      >:first-of-type
      {
        width: 50%;
        height: 350px;
        margin:5px;
        /* border:1px solid purple; */
        >h2
        {
          padding:40px 0 10px 20px;
          font-size: 40px;
          color:rgb(59,58,100)
        }
        >p
        {
          padding:15px 30px 30px 20px ;
          font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
          color:rgb(59,58,100);

        }
        >div
        {
          width: 150px;
          height: 40px;
          background-color:rgb(241,100,43);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left:20px;
          margin-top: 30px;
          >a
          {
            color:white;
            border-radius: 15px;
            font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
            font-size: 15px;
            
          }
        }
      }
      >:last-of-type
      {
        width: 50%;
        margin:35px 50px 0 0;
        position: relative;
 
        >figure
        {
          display: flex;
          padding:10px;
           :nth-child(1)
           {
             width: 50%;
            object-fit:cover;
            border-radius: 5px;
            position:absolute;
            top: 70px;
            left:100px;
            z-index:5;
            
           }
           :nth-child(2)
           {
             width: 50%;
             object-fit:cover;
             border-radius: 5px;
             position:absolute;
             right:20px;
             top:10px;
           }
           
         
        }
       
      }
    }
  }
  >.bg-image
  {
    background-image:url(../image/hero-graphic-3.jpg);
  }
  >.bg-color
  {
    background-color:white;
  }
}
.row
{
  >.row
  {
    width: 100%;
    height: 500px;
    /* border:1px solid red; */
    &:first-of-type
    {
      >h3
    }
    &:last-of-type
    {

    }
    /* >*
    {
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-size: 30px;
    } */
    /* >h3
    {
      color:black;
    }
    >p
    {
      color:red;
    } */
  }
}
}
/* end main */