/*
  Theme Name: Social Media Button Transform
  Author: Mohammad Romin
  Author URI: https://www.facebook.com/mohammadromin03/
  Version: 1.0
*/
/************ TABLE OF CONTENTS ***************

  01. Google Fonts
  02. Effect Area 1
  03. Effect Area 2
  04. Effect Area 3
  05. Effect Area 4
  06. Effect Area 5
  07. Effect Area 6
  08. Effect Area 7
  
***********************************************/
/* 01. Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Playfair Display', serif;
}
:root {
  --facebook: #3b5999;
  --twitter: #55acee;
  --google-plus: #dd4b39;
  --dribbble: #ea4c89;
  --vimeo: #1ab7ea;
  --pinterest: #bd081c;
  --instagram: #e4405f;
  --linkedin: #0077B5;
  --white: #fff;
}
a, 
a:hover {
  text-decoration:none;
}
a {
  transition: .3s;
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.white {
  color: #fff;
}
.black {
  color: #000;
}
/* 02. Effect Area 1 Start */
.effect {
  width: 100%;
  padding: 70px 0 80px;
  background-color: #000;
}
.section-title h2 {
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 3px;
  text-align:center;
}
.effect .buttons {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.effect a {
  text-decoration: none !important;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 20px;
  font-size: 25px;
  overflow: hidden;
  position: relative;
  color: #fff;
  border: 2px solid #212121;
}
.effect a i {
  position: relative;
  z-index: 3;
}
.effect a:last-child {
  margin-right: 0px;
}
.effect a::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.effect a i {
  display: inline-block;
  vertical-align: middle;
}
/* effect */
.effect a {
  border: none;
  overflow: visible;
}
.effect a::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  transform: rotate(45deg);
}
/* Hover */
.effect a:hover::after {
  height: 0px;
  top: 100%;
  transform: rotate(0deg);
}
/* Hover Effect */
.effect a.fb:hover {
  color: var(--facebook);
}
.effect a.fb:hover::after {
  border: 2px solid var(--facebook);
}
.effect a.tw:hover {
  color: var(--twitter);
}
.effect a.tw:hover::after {
  border: 2px solid var(--twitter);
}
.effect a.g-plus:hover {
  color: var(--google-plus);
}
.effect a.g-plus:hover::after {
  border: 2px solid var(--google-plus);
}
.effect a.dribbble:hover {
  color: var(--dribbble);
}
.effect a.dribbble:hover::after {
  border: 2px solid var(--dribbble);
}
.effect a.vimeo:hover {
  color: var(--vimeo);
}
.effect a.vimeo:hover::after {
  border: 2px solid var(--vimeo);
}
.effect a.pinterest:hover {
  color: var(--pinterest);
}
.effect a.pinterest:hover::after {
  border: 2px solid var(--pinterest);
}
.effect a.insta:hover {
  color: var(--instagram);
}
.effect a.insta:hover::after {
  border: 2px solid var(--instagram);
}
.effect a.in:hover {
  color: var(--linkedin);
}
.effect a.in:hover::after {
  border: 2px solid var(--linkedin);
}
/* Effect Area 1 End */

/* 03. Effect Area 2 Start */
.effect-2 {
  width: 100%;
  padding: 70px 0 80px;
  background-color: #fff;
}
.effect-2 .buttons {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.effect-2 a {
  text-decoration: none !important;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 20px;
  font-size: 25px;
  overflow: hidden;
  position: relative;
  color: #fff;
  border: 2px solid #212121;
}
.effect-2 a i {
  position: relative;
  z-index: 3;
}
.effect-2 a:last-child {
  margin-right: 0px;
}
.effect-2 a::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.effect-2 a i {
  display: inline-block;
  vertical-align: middle;
}
/* effect */
.effect-2 a {
  border: none;
  overflow: visible;
}
.effect-2 a::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  transform: rotate(45deg);
}
/* Hover */
.effect-2 a:hover::after {
  height: 0px;
  top: 100%;
  transform: rotate(0deg);
}
/* Hover Effect */
.effect-2 a.fb {
  color: var(--facebook);
}
.effect-2 a.fb::after {
  border: 2px solid var(--facebook);
}
.effect-2 a.tw {
  color: var(--twitter);
}
.effect-2 a.tw::after {
  border: 2px solid var(--twitter);
}
.effect-2 a.g-plus {
  color: var(--google-plus);
}
.effect-2 a.g-plus::after {
  border: 2px solid var(--google-plus);
}
.effect-2 a.dribbble {
  color: var(--dribbble);
}
.effect-2 a.dribbble::after {
  border: 2px solid var(--dribbble);
}
.effect-2 a.vimeo {
  color: var(--vimeo);
}
.effect-2 a.vimeo::after {
  border: 2px solid var(--vimeo);
}
.effect-2 a.pinterest {
  color: var(--pinterest);
}
.effect-2 a.pinterest::after {
  border: 2px solid var(--pinterest);
}
.effect-2 a.insta {
  color: var(--instagram);
}
.effect-2 a.insta::after {
  border: 2px solid var(--instagram);
}
.effect-2 a.in {
  color: var(--linkedin);
}
.effect-2 a.in::after {
  border: 2px solid var(--linkedin);
}
/* Effect Area 2 End */

/* 04. Effect Area 3 Start */
.effect-3 {
  width: 100%;
  padding: 70px 0 80px;
  background-color: #f7f7f7;
}
.effect-3 .buttons {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.effect-3 a {
  text-decoration: none !important;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 20px;
  font-size: 25px;
  overflow: hidden;
  position: relative;
  color: #fff;
  border: 2px solid #212121;
}
.effect-3 a i {
  position: relative;
  z-index: 3;
}
.effect-3 a:last-child {
  margin-right: 0px;
}
.effect-3 a::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.effect-3 a i {
  display: inline-block;
  vertical-align: middle;
}
/* effect */
.effect-3 a {
  border: none;
  overflow: visible;
}
.effect-3 a::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 100%;
  height: 0;
  border: 2px solid #fff;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  transform: rotate(0deg);
}
/* Hover */
.effect-3 a:hover::after {
  height: 100%;
  bottom: -2px;
  transform: rotate(45deg);
}
/* Hover Effect */
.effect-3 a.fb {
  color: var(--facebook);
}
.effect-3 a.fb::after {
  border: 2px solid var(--facebook);
}
.effect-3 a.tw {
  color: var(--twitter);
}
.effect-3 a.tw::after {
  border: 2px solid var(--twitter);
}
.effect-3 a.g-plus {
  color: var(--google-plus);
}
.effect-3 a.g-plus::after {
  border: 2px solid var(--google-plus);
}
.effect-3 a.dribbble {
  color: var(--dribbble);
}
.effect-3 a.dribbble::after {
  border: 2px solid var(--dribbble);
}
.effect-3 a.vimeo {
  color: var(--vimeo);
}
.effect-3 a.vimeo::after {
  border: 2px solid var(--vimeo);
}
.effect-3 a.pinterest {
  color: var(--pinterest);
}
.effect-3 a.pinterest::after {
  border: 2px solid var(--pinterest);
}
.effect-3 a.insta {
  color: var(--instagram);
}
.effect-3 a.insta::after {
  border: 2px solid var(--instagram);
}
.effect-3 a.in {
  color: var(--linkedin);
}
.effect-3 a.in::after {
  border: 2px solid var(--linkedin);
}
/* Effect Area 3 End */

/* 05. Effect Area 4 Start */
.effect-4 {
  width: 100%;
  padding: 70px 0 80px;
  background-color: #fff;
}
.effect-4 .buttons {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.effect-4 a {
  text-decoration: none !important;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 20px;
  font-size: 25px;
  overflow: hidden;
  position: relative;
  color: #fff;
  border: 2px solid #212121;
}
.effect-4 a i {
  position: relative;
  z-index: 3;
}
.effect-4 a:last-child {
  margin-right: 0px;
}
.effect-4 a::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.effect-4 a i {
  display: inline-block;
  vertical-align: middle;
}
/* effect */
.effect-4 a {
  border: none;
  overflow: visible;
}
.effect-4 a::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  width: 100%;
  height: 0;
  border: 2px solid #fff;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  transform: rotate(0deg);
}
/* Hover */
.effect-4 a:hover::after {
  height: 100%;
  bottom: -2px;
  transform: rotate(45deg);
}
/* Hover Effect */
.effect-4 a.fb {
  color: var(--facebook);
}
.effect-4 a.fb::after {
  border: 2px solid var(--facebook);
}
.effect-4 a.tw {
  color: var(--twitter);
}
.effect-4 a.tw::after {
  border: 2px solid var(--twitter);
}
.effect-4 a.g-plus {
  color: var(--google-plus);
}
.effect-4 a.g-plus::after {
  border: 2px solid var(--google-plus);
}
.effect-4 a.dribbble {
  color: var(--dribbble);
}
.effect-4 a.dribbble::after {
  border: 2px solid var(--dribbble);
}
.effect-4 a.vimeo {
  color: var(--vimeo);
}
.effect-4 a.vimeo::after {
  border: 2px solid var(--vimeo);
}
.effect-4 a.pinterest {
  color: var(--pinterest);
}
.effect-4 a.pinterest::after {
  border: 2px solid var(--pinterest);
}
.effect-4 a.insta {
  color: var(--instagram);
}
.effect-4 a.insta::after {
  border: 2px solid var(--instagram);
}
.effect-4 a.in {
  color: var(--linkedin);
}
.effect-4 a.in::after {
  border: 2px solid var(--linkedin);
}
/* Effect Area 4 End */

/* 06. Effect Area 5 Start */
.effect-5 {
  width: 100%;
  padding: 70px 0 80px;
  background-color: #eee;
}
.effect-5 .buttons {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.effect-5 a {
  text-decoration: none !important;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 20px;
  font-size: 25px;
  overflow: hidden;
  position: relative;
  color: #fff;
  border: 2px solid #212121;
}
.effect-5 a i {
  position: relative;
  z-index: 3;
}
.effect-5 a:last-child {
  margin-right: 0px;
}
.effect-5 a::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.effect-5 a i {
  display: inline-block;
  vertical-align: middle;
}
/* effect */
.effect-5 a {
  border: none;
  overflow: visible;
}
.effect-5 a::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
  transform: rotate(45deg);
}
/* Hover */
.effect-5 a:hover::after {
  height: 0;
  top: -2px;
  transform: rotate(0deg);
}
/* Hover Effect */
.effect-5 a.fb {
  color: var(--facebook);
}
.effect-5 a.fb::after {
  border: 2px solid var(--facebook);
}
.effect-5 a.tw {
  color: var(--twitter);
}
.effect-5 a.tw::after {
  border: 2px solid var(--twitter);
}
.effect-5 a.g-plus {
  color: var(--google-plus);
}
.effect-5 a.g-plus::after {
  border: 2px solid var(--google-plus);
}
.effect-5 a.dribbble {
  color: var(--dribbble);
}
.effect-5 a.dribbble::after {
  border: 2px solid var(--dribbble);
}
.effect-5 a.vimeo {
  color: var(--vimeo);
}
.effect-5 a.vimeo::after {
  border: 2px solid var(--vimeo);
}
.effect-5 a.pinterest {
  color: var(--pinterest);
}
.effect-5 a.pinterest::after {
  border: 2px solid var(--pinterest);
}
.effect-5 a.insta {
  color: var(--instagram);
}
.effect-5 a.insta::after {
  border: 2px solid var(--instagram);
}
.effect-5 a.in {
  color: var(--linkedin);
}
.effect-5 a.in::after {
  border: 2px solid var(--linkedin);
}
/* Effect Area 5 End */

/* 07. Effect Area 6 Start */
.effect-6 {
  width: 100%;
  padding: 70px 0 80px;
  background-color: #fff;
}
.effect-6 .buttons {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.effect-6 a {
  text-decoration: none !important;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 20px;
  font-size: 25px;
  overflow: hidden;
  position: relative;
  color: #fff;
  border: 2px solid #212121;
  transform: rotate(45deg);
}
.effect-6 a i {
  position: relative;
  z-index: 3;
}
.effect-6 a:last-child {
  margin-right: 0px;
}
.effect-6 a::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.effect-6 a i {
  display: inline-block;
  vertical-align: middle;
}
/* effect */
.effect-6 a {
  border: none;
  overflow: visible;
}
.effect-6 a::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
/* Hover */
.effect-6 a:hover::after {
  height: 0;
  top: 4px;
  transform: rotate(-45deg);
  left: -25px;
}
/* Hover Effect */
.effect-6 a.fb {
    color: var(--white);
    background: var(--facebook);
}
.effect-6 a.fb:hover {
    color: var(--facebook);
    background: transparent;
}
.effect-6 a.fb:hover::after {
  border: 2px solid var(--facebook);
}
.effect-6 a.tw {
  color: var(--white);
  background: var(--twitter);
}
.effect-6 a.tw:hover {
  color: var(--twitter);
  background: transparent;
}
.effect-6 a.tw:hover::after {
  border: 2px solid var(--twitter);
}
.effect-6 a.g-plus {
  color: var(--white);
  background: var(--google-plus);
}
.effect-6 a.g-plus:hover {
  color: var(--google-plus);
  background: transparent;
}
.effect-6 a.g-plus:hover::after {
  border: 2px solid var(--google-plus);
}
.effect-6 a.dribbble {
  color: var(--white);
  background-color: var(--dribbble);
}
.effect-6 a.dribbble:hover {
  color: var(--dribbble);
  background-color: transparent;
}
.effect-6 a.dribbble:hover::after {
  border: 2px solid var(--dribbble);
}
.effect-6 a.vimeo {
  color: var(--white);
  background: var(--vimeo);
}
.effect-6 a.vimeo:hover {
  color: var(--vimeo);
  background: transparent;
}
.effect-6 a.vimeo:hover::after {
  border: 2px solid var(--vimeo);
}
.effect-6 a.pinterest {
  color: var(--white);
  background: var(--pinterest);
}
.effect-6 a.pinterest:hover {
  color: var(--pinterest);
  background: transparent;
}
.effect-6 a.pinterest:hover::after {
  border: 2px solid var(--pinterest);
}
.effect-6 a.insta {
  color: var(--white);
  background: var(--instagram);
}
.effect-6 a.insta:hover {
  color: var(--instagram);
  background: transparent;
}
.effect-6 a.insta:hover::after {
  border: 2px solid var(--instagram);
}
.effect-6 a.in {
  color: var(--white);
  background-color: var(--linkedin);
}
.effect-6 a.in:hover {
  color: var(--linkedin);
  background-color: transparent;
}
.effect-6 a.in:hover::after {
  border: 2px solid var(--linkedin);
}
/* Effect Area 6 End */

/* 08. Effect Area 7 Start */
.effect-7 {
  width: 100%;
  padding: 70px 0 80px;
  background-color: #000;
}
.effect-7 .buttons {
  margin-top: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.effect-7 a {
  text-decoration: none !important;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 20px;
  font-size: 25px;
  overflow: hidden;
  position: relative;
  color: #fff;
  border: 2px solid #212121;
  transform: rotate(45deg);
}
.effect-7 a i {
  position: relative;
  z-index: 3;
}
.effect-7 a:last-child {
  margin-right: 0px;
}
.effect-7 a::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.effect-7 a i {
  display: inline-block;
  vertical-align: middle;
}
/* effect */
.effect-7 a {
  border: none;
  overflow: visible;
}
.effect-7 a::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: -2px;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  -webkit-transition: all 0.2s linear 0s;
  transition: all 0.2s linear 0s;
}
/* Hover */
.effect-7 a:hover::after {
  height: 0;
  bottom: 1px;
  transform: rotate(-45deg);
  left: 22px;
}
/* Hover Effect */
.effect-7 a.fb {
    color: var(--white);
    background: var(--facebook);
}
.effect-7 a.fb:hover {
    color: var(--facebook);
    background: transparent;
}
.effect-7 a.fb:hover::after {
  border: 2px solid var(--facebook);
}
.effect-7 a.tw {
  color: var(--white);
  background: var(--twitter);
}
.effect-7 a.tw:hover {
  color: var(--twitter);
  background: transparent;
}
.effect-7 a.tw:hover::after {
  border: 2px solid var(--twitter);
}
.effect-7 a.g-plus {
  color: var(--white);
  background: var(--google-plus);
}
.effect-7 a.g-plus:hover {
  color: var(--google-plus);
  background: transparent;
}
.effect-7 a.g-plus:hover::after {
  border: 2px solid var(--google-plus);
}
.effect-7 a.dribbble {
  color: var(--white);
  background-color: var(--dribbble);
}
.effect-7 a.dribbble:hover {
  color: var(--dribbble);
  background-color: transparent;
}
.effect-7 a.dribbble:hover::after {
  border: 2px solid var(--dribbble);
}
.effect-7 a.vimeo {
  color: var(--white);
  background: var(--vimeo);
}
.effect-7 a.vimeo:hover {
  color: var(--vimeo);
  background: transparent;
}
.effect-7 a.vimeo:hover::after {
  border: 2px solid var(--vimeo);
}
.effect-7 a.pinterest {
  color: var(--white);
  background: var(--pinterest);
}
.effect-7 a.pinterest:hover {
  color: var(--pinterest);
  background: transparent;
}
.effect-7 a.pinterest:hover::after {
  border: 2px solid var(--pinterest);
}
.effect-7 a.insta {
  color: var(--white);
  background: var(--instagram);
}
.effect-7 a.insta:hover {
  color: var(--instagram);
  background: transparent;
}
.effect-7 a.insta:hover::after {
  border: 2px solid var(--instagram);
}
.effect-7 a.in {
  color: var(--white);
  background-color: var(--linkedin);
}
.effect-7 a.in:hover {
  color: var(--linkedin);
  background-color: transparent;
}
.effect-7 a.in:hover::after {
  border: 2px solid var(--linkedin);
}
/* Effect Area 7 End */

/* Icon */
.effect-6 .buttons a span, 
.effect-7 .buttons a span {
  transform: rotate(-45deg);
}