@font-face {
	 font-family: 'Barlow-Regular';
	 src: url('assets/fonts/BarlowCondensed-Regular.ttf');
}
 @font-face {
	 font-family: 'Barlow-Medium';
	 src: url('assets/fonts/BarlowCondensed-Medium.ttf');
}
 @font-face {
	 font-family: 'Barlow-SemiBold';
	 src: url('assets/fonts/BarlowCondensed-SemiBold.ttf');
}
 @font-face {
	 font-family: 'Barlow-Bold';
	 src: url('assets/fonts/BarlowCondensed-Bold.ttf');
}
 @font-face {
	 font-family: 'Barlow-ExtraBold';
	 src: url('assets/fonts/BarlowCondensed-ExtraBold.ttf');
}
 

:root{
	--header-height : 3rem;

	/*color*/
	--first-color : #26264b;
	--second-color : #d90e90;
	--title-color : #000;
	--text-color : #2A2A2A;
	--text-color-light : #8b8b9a;
	--section-color : #F4F7FC;
	--body-color : #FFF;

	/*typhography*/
	--font-regular : 'Barlow-Regular',sans-serif;
	--font-medium : 'Barlow-Medium',sans-serif;
	--font-semiBold : 'Barlow-SemiBold',sans-serif;
	--font-bold : 'Barlow-Bold',sans-serif;
    --font-extraBold : 'Barlow-ExtraBold',sans-serif;
	--biggest-font-size : 2.5rem;
	--h1-font-size : 1.5rem;
	--h2-font-size : 1.25rem;
	--h3-font-size : 1rem;
	--normal-font-size : .964rem;
	--small-font-size : .813rem;
	--smaller-font-size : .75rem;
	--hero-font-size : 1.8rem;

	/*z-index*/
	--z-tooltip : 10;
	--z-fixed : 100;

	/*margin*/
	--mb-0-25: .25rem;
	--mb-0-5: .5rem;
	--mb-0-75: .75rem;
	--mb-1: 1rem;
	--mb-1-25: 1.25rem;
	--mb-1-5: 1.5rem;
	--mb-2: 2rem;
	--mb-2-5: 2.5rem;

}
@media screen and (min-width: 964px){
	:root{
		--biggest-font-size : 4rem;
		--h1-font-size : 2.25rem;
		--h2-font-size : 1.75rem;
		--h3-font-size : 1.25rem;
		--normal-font-size : 1.1rem;
		--small-font-size : .875rem;
		--smaller-font-size : .813rem;
		--hero-font-size : 2.5rem;
	}
}
html, body {
	margin:auto;
}
::selection {
    background-color: var(--first-color);
    color: #fff;
}
/*base*/
*, ::before, ::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    background: var(--body-color);
    font-size: var(--normal-font-size);
    color: var(--text-color);
    font-family: var(--font-regular);
    overflow: overlay;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, ul, p {
    margin: 0;
}
ul {
    list-style: none;
    padding: 0;
}
a {
    text-decoration: none;
}
p {
    line-height: 1.75;
}
img {
    width: 100%;
    max-width: 100%;
    height: auto;
}
.bg-nav{
    background-color: var(--first-color) !important
}
/*class*/
.section {
    padding: 4.5rem 0 2.5rem;
}
.container-fluid {
    width: auto;
    max-width: 968px;
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
}
.section__line {
    width: 8%;
    background: var(--first-color);
    height: 3px;
}
.grid {
    display: grid;
    gap: 1.2rem;
}
.pree-title {
    letter-spacing: 0.2em;
    font-size: var(--small-font-size);
    line-height: 1.2;
    color: #f09922;
    text-transform: uppercase;
    font-family: var(--font-bold);
}
.title {
    margin-top: var(--mb-0-5);
    margin-bottom: 0;
    text-transform: uppercase;
    color: var(--first-color);
    font-size: var(--biggest-font-size);
    font-family: var(--font-bold);
}
.title-white {
    color: #fff;
}
body::-webkit-scrollbar {
    width: 10px;
    background: none;
}
body::-webkit-scrollbar-track {
    border-radius: 10px;
    background: none;
    border: 1px solid #ccc;
    display: none;
}
body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #cacaca;
    transition: 0.5s ease-in-out;
}
body::-webkit-scrollbar-thumb:hover {
    background: #6d6d6d;
}
@media screen and (min-width: 1024px) {
    .container-fluid {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
   }
    .grid {
        display: grid;
        gap: 4rem;
   }
}

/* nav */
#navbar .container-fluid{
    width: 100%;
}
.mainNav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
.navbar-brand {
    width: 200px;
    max-width: 100%;
}
ul.nav-primary {
    margin: 0;
    padding: 0;
}
ul.nav-primary li:first-child:before, ul.nav-primary li:hover:before{
    width: 100%;
}
ul.nav-primary li:before{
    background-color: #fff;
    bottom: -8px;
    content: "";
    height: 2px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    transition: all .3s ease;
    width: 0%;
}
ul.nav-primary li {
    display: inline-block;
    list-style: none;
    position: relative;
    color: #fff;
    margin: 0px 10px;
}

ul.nav-primary li a {
    color: var(--body-color);
    font-size: var(--regular-font-size);
    font-family: var(--font-semiBold);
    position: relative;
    text-transform: uppercase;
    cursor: pointer;
}

.show-mobile { display: none;}
.show-mobile-nav {
	margin-right: 20px;
}

.close-menu-wrp {
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	right: 30px;
	top: 20px;
	cursor: pointer;
}
.close-menu-wrp:before,.close-menu-wrp:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: white;
	left: 0;
	top: 15px;
}
.close-menu-wrp:before{
	transform: rotate(45deg);
}

.close-menu-wrp:after{
	transform: rotate(-45deg);
}
.hamburger-wrp {
	width: 25px;
	margin-right: 20px;
	cursor: pointer;
	display: inline-block;
}

.hamburger-wrp .item-ham {
	width: 100%;
	height: 2px;
	display: block;
	background-color: white;
}
.hamburger-wrp .item-ham:nth-child(2){
	margin: 5px 0;
}

@media only screen and (max-width: 1024px) {
    #navbar .container-fluid{
        width: 100%;
    }
    .show-mobile {
		display: block;
	}
    .navCustomMmp{
        display: flex;
        flex-direction: column;
        transform: translate(-50%);
        top: 25%;
        position: absolute;
        left: 50%;
        width: max-content;
    }
    
    .navCustomMmp li{
        padding: 15px;
    }
    .containerNav{
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        z-index: 9999;
        text-align: center;
        display: none;
    }
    ul.nav-primary li::before{
        display: none;
    }
    
}
ol{
    padding-left: 0;
}
ol li{
    list-style: decimal-leading-zero;
    font-size: 50px;
    margin: 0 0 0 2em;
    font-weight: bold;
}
.footer-menu {
    padding-left:0;
}
.footer-menu li{
    list-style: none;
    padding: 3px 0px;
}

/* video background */
.videoBackground {
    height: 100vh;
    margin: 0 auto;
    padding: 0;
}
.videoBackground .video__container {
    height: 100%;
}
.videoBackground .video__container .myVideo {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: none;
}
.videoBackground .video__container .videoMobile {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 568px) {
    .videoMobile {
        display: none !important;
   }
    .myVideo {
        display: block !important;
   }
}


/* banner */
#banner .overlay-banner{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #9fb8ab;
    height: 100%;
    opacity: 0.9;
}
#banner .banner-container{
    padding-left: 5%;
    padding-right: 5%;
}
#banner h2{
    font-size: 80px;
}
#banner p{
    padding-bottom: 5px;
}
#banner strong{
    font-family: var(--font-bold);
    font-size: 18px;
    letter-spacing: 1px;
}


/* section about */

.section-about{
    background-color: #2b4743;
    padding-top: 10rem;
    padding-bottom: 10rem;
}
.section-about h2{
    color: #9fb8ab;
}
.section-about p{
    padding-bottom: 15px;
}
@media screen and (max-width: 766px) { 
    .section-about{
        background-color: #2b4743;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}


.section-vision-mision{
    background-color: #2b4743;
    padding-bottom: 10rem;
}
.section-vision-mision h2{
    color: #9fb8ab;
}

.section-vision-mision ul li{
    display: inline-block;
	padding: 5px 10px;
	border: 1px solid rgba(255, 255, 255, 0.23);
	margin: 2px;
    line-height: 20px;
}
@media screen and (max-width: 766px) { 
    .section-vision-mision{
        padding-bottom: 3rem;
    }
}


/* about event */
.about .about__container {
    margin-left: 0;
    margin-right: 0;
    align-items: center;
}
.about .about__container .about__data {
    padding: 4rem 0;
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
}
.about .about__container .about__data .about__title {
    margin-bottom: var(--mb-1);
}
.about .about__container .about__data .about__desc {
    text-align: justify;
    color: var(--text-color-light);
    margin-bottom: var(--mb-2-5);
}
.about .about__container .about__data .about__info {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 1rem;
}
.about .about__container .about__data .about__info .info__items {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    column-gap: 10px;
}
.about .about__container .about__data .about__info .info__items img {
    width: 100%;
    max-width: 23px;
}
.about .about__container .about__data .about__info .info__items .info__detail h5 {
    font-size: var(--h3-font-size);
    text-transform: uppercase;
    margin-bottom: var(--mb-0-25);
    color: var(--first-color);
}
.about .about__container .about__data .about__info .info__items .info__detail span {
    color: var(--text-color-light);
    font-size: var(--regular-font-size);
}
.about .about__container .about__data .aboutBtn__Container {
    margin-top: 3rem;
}
.about .about__container .about__img {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
@media screen and (min-width: 768px) {
    .about__container {
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 0 !important;
   }
    .about__container .about__data {
        padding: 0 !important;
        margin-left: 10% !important;
        margin-right: 10% !important;
   }
}
@media screen and (min-width: 1024px) {
    .about__info {
        column-gap: 4rem !important;
   }
}


/* button */
.btn{
    padding: 12px 20px;
    margin: 0;
    font-family: var(--font-medium);
    text-transform: uppercase;
    border: none !important;
    border-radius: 0 !important;
    transition: 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
}
.btn-primary{
    color: var(--body-color);
    background-image: linear-gradient(to right, #822ea8 0%, #d90e90 100%);
}
.btn-primary:hover{
    background-image: linear-gradient(to right, #d90e90 0%, #822ea8 100%);
}

.btn-secondary{
    color: var(--body-color);
    background-color: var(--first-color);
}
.btn-secondary:hover{
    background-color: #f09922;
}


/* programs */
.program{
    background-color: #9fb8ab;
}
.program .title{
    color: #2b4743;
}
.program .container-fluid{
    padding-top: 10rem;
    padding-bottom: 10rem;
}
/* .program  .program_data {
    padding: 4rem 0;
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
} */
.owl-prev, .owl-next {
	position: absolute;
	top: 0;
	height: 100%;
}

.owl-prev {
	left: -35px;
}

.owl-next {
	right: -35px;
}

.icon-slider{
    position: relative;
    top: -20%;
}

@media only screen and (max-width: 770px) {
    .program .container-fluid{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .icon-slider{
        height: auto;
        position: relative;
        top: 0;
    }
    .owl-prev {
      left: -15px;
    }
    
    .owl-next {
      right: -15px;
    }
    .news .owl-prev {
      left: -0px !important;
    }
    
    .news .owl-next {
      right: -0px !important;
    }
    
}
@media screen and (min-width: 768px) {
     .program_data {
        padding: 0 !important;
        margin-left: 10% !important;
        margin-right: 10% !important;
   }
}
/* pameran */
.pameran{
    background-color: #2b4743;
}
.pameran p{
    padding-bottom: 20px;
}
.pameran .title{
    color: #9fb8ab;
}
.pameran  .pameran_data {
    padding: 4rem 0;
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
}
@media screen and (min-width: 768px) {
    .pameran_data {
       padding: 0 !important;
       margin-left: 10% !important;
       margin-right: 10% !important;
  }
}

/* section partisipan */

.section-partisipan{
    background-color: #9fb8ab;
    position: relative;
    z-index: 1;
}
.section-partisipan h2{
    color: #2b4743;
}

.section-partisipan ul li{
    display: inline-block;
	padding: 5px 10px;
	border: 1px solid rgba(255, 255, 255, 0.23);
	margin: 2px;
    line-height: 20px; 
}
@media screen and (max-width: 975px) {
    .section-partisipan {
        padding-top: 3rem;
        /* padding-bottom: 3rem; */
  }
}

/* timeline */
/* The actual timeline (the vertical ruler) */
.timeline .container-fluid{ padding: 4rem 0;}
.timeline .img-timeline{ z-index: 1; position: relative;}
.timeline {
    background-color: #2b4743;
    position: relative;
  }
  .timeline h2{
    background-color: #2b4743;
    z-index: 2;
    position: relative;
  }
  /* The actual timeline (the vertical ruler) */
  .timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: #5c705d;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
    z-index: 0;
  }
  
  /* Container around content */
  .container-timeline {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
  }
  
  /* The circles on the timeline */
  .container-timeline::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -13px;
    background-color: #c9e265;
    top: 50%;
    border-radius: 50%;
    z-index: 1;
    transform: translateY(-50%);
  }
  
  /* Place the container to the left */
  .left {
    left: 0;
  }
  
  /* Place the container to the right */
  .right {
    left: 50%;
  }
  

  /* Fix the circle for containers on the right side */
  .right::after {
    left: -13px;
  }
  
  /* The actual content */
  .content {
    padding: 20px 30px;
    color: white;
    position: relative;
    border-radius: 6px;
  }
  
  /* Media queries - Responsive timeline on screens less than 600px wide */
  @media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    .timeline::after {
    left: 31px;
    }
    
    /* Full-width containers */
    .container-timeline {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
    }
    
    /* Make sure that all arrows are pointing leftwards */
    .container-timeline::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
    }
  
    /* Make sure all circles are at the same spot */
    .left::after, .right::after {
    left: -1px;
    }
    
    /* Make all right containers behave like the left ones */
    .right {
    left: 0%;
    }
  }
  
/* themes */
.themes {
    background: #f09922;
    padding: 4.5rem 0;
    margin-top: -3px;
}
.themes .themes__container {
    width: 80%;
    max-width: 1366px;
    margin: 0 auto;
}
.themes .themes__container .themes__title {
    text-align: center;
    margin-bottom: var(--mb-2);
}
.themes .themes__container .themes__data {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-content: center;
    text-align: center;
}
.themes .themes__container .themes__data .themes__items {
    border: 2px solid #fff;
    padding: 30px 0px;
    background-color: transparent;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}
.themes .themes__container .themes__data .themes__items span {
    font-family: var(--font-semiBold);
    font-size: var(--h3-font-size);
    color: #fff;
}
.themes .themes__container .themes__data .themes__items:hover {
    border: 2px solid var(--first-color);
    background-color: var(--first-color);
}
@media screen and (min-width: 768px) {
    .themes__data {
        grid-template-columns: repeat(3, minmax(200px, 1fr)) !important;
   }
    .themes__data .themes__items:last-child {
        grid-column-end: 3 !important;
   }
}


/* designer */
.slider {
    margin-top: -4px;
}
.slider .slide-4 {
    background-image: url(assets/img//slide-1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff !important;
}
.slider .slide-4 h1, .slider .slide-4 h6 {
    text-align: center;
    color: #fff !important;
}
.slider .slide-4 p {
    width: 100%;
    font-size: 1.3rem;
    text-align: center;
    color: #fff;
    margin-top: 20px;
}

.owl-dots {
    text-align: center;
    height: 0;
    top: -35px;
    position: relative;
  }
  .owl-dots button.owl-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    background: white;
    opacity: 0.2;
    margin: 0 3px;
  }
  .owl-dots button.owl-dot.active {
    background-color: white;
    opacity: 1;
  }
  .owl-dots button.owl-dot:focus {
    outline: none;
  }
@media screen and (min-width: 768px) {
    .slider .slide-4 p {
        width: 60% !important;
   }
}



/* gallery */

.gallery {
    background-image: linear-gradient(to right, #822ea8 0%, #d90e90 100%);
    padding: 4rem 0;
    overflow: hidden;
    margin-top: -3px;
}
.gallery .gallery__container .gallery__title {
    text-align: center;
    margin-bottom: var(--mb-2);
}
.gallery .gallery__container .gallery__banner .galleryBanner {
    height: 300px;
    width: 100%;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    overflow: hidden;
}
.gallery .gallery__container .gallery__banner .img__galleryBanner {
    opacity: 0;
}
.gallery .gallery__container .gallery__dataContainer .alm-listing{
    margin-top: 1rem;
}
.gallery .gallery__container .gallery__dataContainer .gallery__data .alm-reveal {
    display: grid !important;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-content: center;
}
.gallery .gallery__container .thumbnail {
    position: relative;
}
.gallery .gallery__container .thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--second-color);
    opacity: 0;
    cursor: pointer;
}
.gallery .gallery__container .thumbnail:hover .thumbnail-overlay {
    opacity: 0.8;
    transform: scale(1);
}
.gallery .gallery__container .thumbnail-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
}
.gallery .gallery__container .thumbnail-icon:before, .gallery .gallery__container .thumbnail-icon:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: #fff;
    opacity: 0;
    transition: 0.3s ease-out all;
}
.gallery .gallery__container .thumbnail-icon:before {
    transform: rotate(0);
}
.gallery .gallery__container .thumbnail-icon:after {
    transform: rotate(90deg);
}
.gallery .gallery__container .thumbnail:hover .thumbnail-icon:before, .gallery .gallery__container .thumbnail:hover .thumbnail-icon:after {
    opacity: 1;
}
.gallery .gallery__container .thumbnail:hover .thumbnail-icon:before {
    transform: rotate(90deg);
}
.gallery .gallery__container .thumbnail:hover .thumbnail-icon:after {
    transform: rotate(0);
}
@media screen and (min-width: 568px) {
    .gallery__data .alm-reveal {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
   }
}


/* sponsor */

.sponsor {
    padding: 4.5rem 0;
}
.sponsor .sponsor__container .sponsor__title {
    text-align: center;
    margin-bottom: var(--mb-2-5);
}
.sponsor .sponsor__container .sponsor__data {
    width: 80%;
    margin: auto;
    justify-content: center;
    gap: 4rem;
    color: var(--text-color-light);
    margin-bottom: var(--mb-2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.sponsor .sponsor__container .sponsor__data h4 {
    margin-bottom: 20px;
}
.sponsor .sponsor__container .sponsor__data .sponsor__items {
    text-align: center;
}
.sponsor .sponsor__container .sponsor__data .sponsor__items h4 {
    color: var(--text-color-light);
    margin-bottom: var(--mb-2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.sponsor .sponsor__container .sponsor__data .sponsor__items img {
    max-width: 280px;
}
.sponsor .sponsor__container .sponsor__data .sponsor__supported {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.sponsor .sponsor__container .sponsor__data .sponsor__supported img {
    max-width: 280px;
}
.sponsor .sponsor__container .supported {
    text-align: center;
}

@media screen and (min-width: 568px) {
    .sponsor__data {
        grid-template-columns: repeat(2, 1fr) !important;
   }
}

/* contact */
.contact {
    overflow: hidden;
}
.contact .contact__container .contact__title {
    text-align: center;
    margin-bottom: var(--mb-2-5);
}
.contact .contact__container .contact__data {
    width: 100%;
    align-items: flex-start;
}
.contact .contact__container .contact__data .contact__form {
    width: 100%;
    gap: 1rem;
}
.contact .contact__container .contact__data .contact__form .contact__formTop {
    gap: 1rem;
}
.contact .contact__container .contact__data .contact__form .contact__formTop input {
    width: 100%;
    padding: 2rem 1rem;
}
.contact .contact__container .contact__data .contact__form textarea {
    max-width: 100%;
    min-width: 100%;
    padding: 2rem 1rem;
    height: 272px;
    min-height: 78px;
    max-height: 462px;
    resize: vertical;
}
.contact .contact__container .contact__data .contact__form .btn__formContainer {
    margin-top: var(--mb-0-75);
}
.contact .contact__container .contact__data .contact__form .btn__formContainer button {
    cursor: pointer;
}
.contact .contact__container .contact__data .contact__usWrapper .contact__us {
    background-color: var(--second-color);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contact .contact__container .contact__data .contact__usWrapper .contact__us .contact__items {
    color: #fff;
}
.contact .contact__container .contact__data .contact__usWrapper .contact__us .contact__items h5 {
    font-size: var(--h3-font-size);
    font-family: var(--font-semiBold);
    margin-bottom: var(--mb-0-5);
}
.contact .contact__container .contact__data .contact__usWrapper .contact__us .contact__items p a {
    color: #fff;
}
.contact .contact__container .contact__data .contact__usWrapper .contact__us .contact__items p a:hover {
    text-decoration: underline;
}
.contact .contact__container .contact__data .contact__usWrapper .contact__us .contact__items .contact__sosmedContainer {
    margin-top: var(--mb-1);
}
.contact .contact__container .contact__data .contact__usWrapper .contact__us .contact__items .contact__sosmedContainer .contact__SosmedBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--first-color);
    cursor: pointer;
    transition: 0.3s ease-in-out;
}
.contact .contact__container .contact__data .contact__usWrapper .contact__us .contact__items .contact__sosmedContainer .contact__SosmedBtn:hover {
    background-color: #f09922;
}
.contact .contact__container .contact__data .contact__usWrapper .contact__us .contact__items .contact__downloadContainer {
    margin-top: var(--mb-1);
    display: grid;
    gap: 20px;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(110px, 100px));
}
@media screen and (min-width: 568px) {
    .contact__formTop {
        grid-template-columns: repeat(2, 1fr);
   }
    .contact__data {
        grid-template-columns: 2fr 1fr;
   }
}


/* footer */
.footer {
    background-color: #15162b;
    padding: 4.5rem 0;
}
.footer .footer__container {
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
}
.footer .footer__container .footer__items .footer__logo {
    max-width: 200px;
}
.footer .footer__container .footer__items .footer__title {
    color: #fff;
    text-transform: uppercase;
    margin-bottom: var(--mb-1-5);
    letter-spacing: 0.1em;
}
.footer .footer__container .footer__items p {
    color: var(--text-color-light);
    font-size: 1.1rem;
    margin-bottom: var(--mb-1-5);
}
.footer .footer__container .footer__items .footer__link {
    color: #f09922;
    text-transform: uppercase;
    text-decoration: underline !important;
    font-family: var(--font-semiBold);
    transition: 0.3s ease-in-out;
}
.footer .footer__container .footer__items .footer__link:hover {
    color: var(--second-color);
}
.footer .footer__container .footer__items .footer__btnContainer {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.footer .footer__container .footer__items .footer__btnContainer .footer__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--second-color);
    cursor: pointer;
    transition: 0.3s ease-in-out;
}
.footer .footer__container .footer__items .footer__btnContainer .footer__btn:hover {
    background-color: #f09922;
}
.footer .footer__container .footer__items:nth-child(1) {
    grid-column: span 3;
}
.footer .footer__copy {
    margin-top: 4rem;
    color: #fff;
    font-size: 0.8rem;
    text-align: center;
    padding: 2rem 0 0;
    border-top: 1px solid var(--text-color-light);
}
@media screen and (min-width: 846px) {
    .footer__container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   }
    .footer__container .footer__items:nth-child(1) {
        grid-column: span 1 !important;
   }
}

.navs-togle{
    font-family: var(--font-semiBold);
    font-size: var(--h3-font-size);
    color: white
}
.navs-togle:hover,.navs-togle.active{
    font-family: var(--font-semiBold);
    font-size: var(--h3-font-size);
    color: #cd1293 !important;
    background-color: white;
}