/**###########################################
#START


--------#####--------
Template Name: Attor
Template URI: 
Description: This is html5 template
Author: Md Ridoy Khan
Author URI: https://github.com/mdridoykhan138
Support: admin@gmail.com
Version: 1.0.0
--------#####--------

===========================
CSS INDEX
===========================

1) home-one
    1.1) preloader area here
    1.2) header area here
    1.3) main body area here
    1.4) activity area here
    1.5) more activity area here
    1.6) cta area here
    1.7) fotter area here



#theEND
###########################################**/



/*########################
1) home-one ---------------[########################]
########################*/

/*===========================
1.1) preloader area here
===========================*/
.preloder {
	width: 100%;
	height: 100vh;
	position: fixed;
	background: var(--secondColor);
	top: 0;
	left: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pre-loading {
	position: relative;
	width: 70px;
	height: 70px;
	background: transparent;
	border: 10px solid var(--black);
	border-top: transparent;
	border-bottom: transparent;
	border-radius: 50%;
	animation: loading 1.2s linear infinite;
}

@keyframes loading {
	25% {
		background: transparent;
	}
	to {
		transform: rotate(360deg);
	}
}
/*---------------------------
1.1) preloader area ends here
---------------------------*/


/*===========================
1.2) header area here
===========================*/
header {
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    padding: 35px 0px;
    background-color: transparent;
    z-index: 999;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    background: var(--black);
    z-index: 200;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    animation: 600ms ease-in-out 0s normal none 1 running fadeInDown;
    -webkit-animation: 600ms ease-in-out 0s normal none 1 running fadeInDown;
}
.headerLogo a {
    display: inline-block;
}
.headerContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.headerNavContent {
    display: flex;
    align-items: center;
    gap: 50px;
}
.headerNavContent li a {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: 'Saira', sans-serif;
    font-weight: 500;
    color: var(--mainWhite);
}
.headerNavContent li a {
    color: var(--mainWhite);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.headerNavContent li a img {
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.headerNavContent li:hover a img {
    opacity: 1;
    visibility: visible;
}
.headerNavContent li:hover a span{
    color: var(--secondColor);
}
/*---------------------------
1.2 header area ends here
---------------------------*/


/*===========================
1.3) main body area here
===========================*/
.main {
    background: var(--black);
    padding: 311px 0px 140px;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.mainContent {
    max-width: 600px;
}
.subHeader {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--secondColor);
}
.mainHeader {
    margin-bottom: 24px;
}
.description {
    line-height: 48px;
}
.description a {
    color: var(--secondColor);
}
.description2 a:hover {
    color: var(--secondColor);
}
.buttonItems {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}
.mainButton {
    width: 120px;
    display: inline-block;
    text-align: center;
    text-transform: capitalize;
    padding: 20px 0px;
    color: var(--black);
    font-weight: 500 !important;
    font-size: 20px;
    line-height: 20px;
    background: var(--secondColor);
    border: 1px solid var(--secondColor);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.mainButton:hover {
    color: var(--secondColor);
    background: transparent;
    border: 1px solid var(--secondColor);
}
.transparentButton {
    width: 120px;
    display: inline-block;
    text-transform: capitalize;
    padding: 20px 0px;
    background: transparent;
    color: var(--secondColor);
    background: transparent;
    border: 1px solid var(--secondColor);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}
.transparentButton:hover {
    color: var(--black);
    background: var(--secondColor);
    border: 1px solid var(--secondColor);
}
/* social lists */
.socialLists {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
    display: none;
}
.socialList a {
    display: block;
    font-size: 30px;
    color: var(--mainWhite);
}
.socialList a:hover {
    color: rgba(250, 252, 255, 0.35);
}
/* work content  */
.workList {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    grid-gap: 80px;
    flex-wrap: wrap;
    margin-top: 200px;
}
.academyName {
    margin-bottom: 8px;
}
.academyName a {
    font-size: 30px;
    line-height: 100%;
    font-weight: 500;
    display: block;
}
.academyName a:hover {
    color: var(--secondColor);
}
/* main image area here  */
.mainImage {
    position: absolute;
    bottom: 0;
    left: calc(46% + 20px);
    z-index: -1;
    max-width: 100%;
}
/*---------------------------
1.3 main body area ends here
---------------------------*/



/*===========================
1.4) activity area here
===========================*/
.activity {
    background: var(--black);
    padding: 0px 0px 100px;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
/* activity header area here */
.activityHeader {
    margin-bottom: 60px;
}
.activityHeaderLists {
    border: none;
}
.activityHeaderList {
    flex: 1;
}
.activityHeaderLink {
    width: 100%;
    height: 100%;
    font-weight: 600;
    font-size: 60px;
    line-height: 90px;
    color: var(--black) !important;
    background: var(--mainWhite) !important;
    margin: 0px !important;
    padding: 18px 15px;
    text-transform: capitalize;
    border: none !important;
    border-radius: 0px !important;
}
.activityHeaderLink:hover {
    border: none !important;
}
.activityHeaderLink.active {
    background: var(--secondColor) !important;
    border: none !important;
}
/* activity container area here */
.activityItems {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
}
.activitySingleImg {
    text-align: end;
}
.activitySingleImg img {
    max-width: 100%;
    height: 500px;
    object-fit: contain;
}
.activityHeading {
    font-weight: 600;
    font-size: 40px;
    line-height: 160%;
    font-family: 'Inter', sans-serif;
    margin-bottom: 20px;
    color: var(--secondColor);
}
.activityContent ul {
    list-style-type: disc;
    padding-left: 30px;
}
.activityContent ul li:not(:last-child) {
    margin-bottom: 20px;
}
.activityContent ul li::marker {
    color: var(--mainWhite) !important;
    font-size: 30px;
}
.activityContent ul li p {
    font-weight: 400;
    font-size: 30px;
    line-height: 160%;
    color: var(--mainWhite);
}
.activityDesc {
    margin-top: 60px;
}
.activityDesc p {
    font-weight: 500;
    font-size: 40px;
    line-height: 160%;
    text-align: center;
    padding: 0px 130px;
}
/*---------------------------
1.4 activity area ends here
---------------------------*/


/*===========================
1.5) more activity area here
===========================*/
.moreActivity_content ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
}
.moreActivity_content ul li a {
    display: block;
    height: 100%;
    padding: 18px 15px;
    background: var(--mainWhite);
    color: var(--black);
    font-size: 44px;
    line-height: 54px;
    font-weight: 600;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
}
.moreActivity_content ul li a:hover {
    background: var(--secondColor);
}
/*---------------------------
1.5 more activity area ends here
---------------------------*/


/*===========================
1.6) cta area here
===========================*/
.cta {
    background: var(--secondColor);
    padding: 120px 0px;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.ctaItems {
    display: flex;
    justify-content: space-between;
    grid-gap: 60px;
    align-items: center;
    flex-wrap: wrap;
}
.ctaItems .ctaItem:nth-child(2) {
    max-width: 400px;
    width: 100%;
}
.ctaHeader {
    font-size: 80px;
    line-height: 90px;
    font-weight: 700;
    color: var(--black);
    text-transform: capitalize;
    margin-bottom: 10px;
}
.ctaDesc {
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    color: var(--black);
}
.ctaButtons {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ctaButtons .mainButton {
    width: 100%;
    background: var(--black);
    color: var(--secondColor);
    border: 1px solid var(--black);
}
.ctaButtons .mainButton:hover {
    background: transparent;
    color: var(--black);
    border: 1px solid var(--black);
}
/*---------------------------
1.6 cta area ends here
---------------------------*/


/*===========================
1.7) fotter area here
===========================*/
.fotter {
    background: var(--black);
    padding: 60px 0px;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.fotterItmes {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.fotterCopyRight p {
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    font-family: 'Saira', sans-serif;
}
/*---------------------------
1.7 fotter area here
---------------------------*/

/*########################
#theEndCSS########################
########################*/