/*
 * Appiguru Production Stylesheet
 * Cleaned for the Appiguru website.
 * Legacy Monoline styles not required by the current site have been removed.
 */
/*
Author       : theme_ocean
Template Name: Monoline - Design Agency HTML Template
Version      : 1.0
*/
/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, section-title, preloader btn, overlay, section-padding etc)
    02. START BOOTSTRAP NAVIGATION OVERRIDES
    03. START HOME DESIGN
    04. START ABOUT DESIGN
    05. START COUNTER DESIGN
    06. START WHY CHOOSE US DESIGN
    07. START SERVICE DESIGN
    08. START CASE STUDY DESIGN
    09. START POROFOLIO DESIGN
    10. START SKILL DESIGN
    11. START PROMOTION DESIGN
    12. START TEAM DESIGN
    13. START TESTIMONIALS DESIGN
    14. START PRICING DESIGN
    15. START BLOG DESIGN
    16. START ADDRESS DESIGN
    17. START PARTNER DESIGN
    18. START FOOTER DESIGN
    19. START SECTION TOP DESIGN
  =============================================================*/
/*
* ----------------------------------------------------------------------------------------
* 01.GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
body {
color: #747474;
font-family: 'Poppins', sans-serif;
font-size: 17px;
font-weight: 400;
line-height: 26px;
background:#fff;
overflow-x:hidden;
}
html,
body { height: 100%;position:relative;  }
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0px;
  margin-top: 0px; 
  font-family: oswald,sans-serif;
  color: #1b2032;
  font-weight: 400;
}
a {
font-family: oswald,sans-serif;
text-decoration: none;
-webkit-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
a:focus {
    outline: none;
    text-decoration: none;
}
p {
    margin-bottom: 0;
}
ul,
li {
    margin: 0;
    padding: 0;
}

::-webkit-input-placeholder {
  font-weight: 400;
font-family: 'Poppins', sans-serif; }

:-moz-placeholder {
  font-weight: 400;
font-family: 'Poppins', sans-serif;}

::-moz-placeholder {
  font-weight: 400;
font-family: 'Poppins', sans-serif;}

:-ms-input-placeholder {
  font-weight: 400;
font-family: 'Poppins', sans-serif;}
.form-control::placeholder {
	color: #232a34;
	opacity: 1;
}
fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}
/*START PRELOADER DESIGN*/
.preloader {
	background:#fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;	
}
.spinner {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	font-size: 10px;
	text-indent: -12345px;
	z-index: 10000;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:#ffaa17;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
.status-mes h4 {
color: #f7f7f7;
position:relative;
font-size:24px;
margin-top: 30px;
text-transform: capitalize;
letter-spacing: 1px;
}
.no-padding { padding: 0 }
/*END PRELOADER DESIGN*/
.section-padding {padding:80px 0;}
/*START SECTION TITLE DESIGN*/
.section-title{margin-bottom:75px;}
.section-title  h2 {
font-size: 54px;
font-weight:600;
margin-top: 0;
position: relative;
text-transform: capitalize;
}
h2.section-title-white{
color:#fff;
font-size: 54px;
font-weight:600;
margin-top: 0;
position: relative;
text-transform: capitalize;
}
p.section-title-white{color:#fff;}
.section-title span{
background: #f5325c none repeat scroll 0 0;
display: block;
height: 2px;
margin: 10px auto;
width: 100px;
}

.section-title-white{color:#fff;position:relative;}
.section-title  p{
padding: 0 10px;
width: 60%;
margin: auto;	
}
/*END SECTION TITLE DESIGN*/
/*START SCROLL TO TOP*/
.topcontrol {
background: #ffaa17 none repeat scroll 0 0;
border-radius: 30px;
bottom: 5px;
box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
color: #fff;
cursor: pointer;
font-size: 22px;
height: 50px;
line-height: 47px;
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
position: fixed;
right: 5px;
text-align: center;
-webkit-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
width: 50px;
}
@media only screen and (max-width:768px) { 
.topcontrol {display:none;}
}
.topcontrol:hover {
    background: #222;
    color: #fff;
}
/*END SCROLL TO TOP*/

/*START BUTTON DESING*/
.btn_one {
	background:#fff;
	border: 2px solid #1b2032;
	color: #1b2032;
	padding: 8px 30px;
	border-radius: 30px;
	transition: 0.3s;
	margin-top: 10px;
	box-shadow: 0 10px 40px -10px rgba(0,64,128,.3);
	display: inline-block;
}
.btn_one:hover {
background:#ffaa17;
border:2px solid #ffaa17;
color:#fff;
}
/*END BUTTON DESING*/
/*
* ----------------------------------------------------------------------------------------
* 01.END GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 02.START BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* 02.END BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/

/* FEATURE / SERVICES */
/*
* ----------------------------------------------------------------------------------------
* 04.START ABOUT DESIGN
* ----------------------------------------------------------------------------------------
*/
.feature_area {
	padding-bottom: 80px;
	position: relative;
	margin-top: -80px;
}
@media only screen and (max-width:768px) { 
.feature_area{
	margin-top:0px;
}
}
.feature_bg{
	padding:60px;
	background: #fff;
	box-shadow: 0 10px 40px -10px rgba(0,64,128,.2);
	border-radius: 10px;
	margin-top:-100px;
}
@media only screen and (max-width:768px) { 
.feature_bg{
	margin-top:0px;
}
}
.single_feature {
	background: #f9fcff;
	position: relative;
	padding: 60px;
	border: 1px solid #eee;
	border-radius: 5px;
	transition:0.3s;
}
.single_feature:hover{
background:#fff;
box-shadow:0px 60px 60px rgba(0,0,0,0.1);
-webkit-transform: translate(0, -10px);
        transform: translate(0, -10px);
}
.single_feature img {
width:60px;
margin-bottom: 25px;
}
.single_feature h4 {
	margin-bottom: 15px;
	font-size: 20px;
}
.single_about_content {
	margin-top: -60px;
	background: #fff;
	padding: 60px;
	border-radius: 10px;
	box-shadow: 0 10px 40px -10px rgba(0,64,128,.2);
	position: relative;
	margin-bottom: 60px;
}
.single_about_content h2 {
	margin-bottom: 30px;
	font-size: 50px;
	font-weight: 500;
}

.hire_us_area{background:#f9fcff;}
.hire_img img {
	width: 200px;
}
.hire_content h2 {
	font-weight: 500;
	font-size: 50px;
	margin-bottom: 20px;
}
.hire_content p {
	margin-bottom: 30px;
}
/*
* ----------------------------------------------------------------------------------------
* 04.END ABOUT DESIGN
* ----------------------------------------------------------------------------------------
*/

/* COUNTER */
/*
* ----------------------------------------------------------------------------------------
* 05.START COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/
.counter_feature {
background:#0e5ca6;
	position: relative;
	margin-bottom: 0px;
}
.single-project {
	border-right: 1px solid #3e3c85;
	position: relative;
}
.single-project-mrnone{border-right:0px;}
.single-project img {
	width:60px;
	margin-bottom: 20px;
}
.single-project h2 {
	font-weight: 700;
	font-size: 50px;
	color:#fff;
}
.single-project h4 {
	margin-bottom: 0;
	font-size:16px;
	color:#fff;
}
.mfp-iframe-holder .mfp-content {
  line-height: 0;
  margin-top: 55px;
  max-width: 900px;
  width: 100%;
}
.video_btn {
	padding:150px 0;
	position: relative;
	border:15px solid #fff;
	margin-top: 100px;
	margin-bottom:-180px;
	box-shadow:0 10px 40px -10px rgba(0,64,128,.2);
}
.video_btn h3 {
	background: #ffaa17;
	padding: 30px;
	margin: 0 40px;
	line-height: 40px;
	margin-bottom: 30px;
	text-transform: capitalize;
	font-weight: 600;
}
.video_btn a {
	background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
	border: 4px solid #fff;
	border-radius: 100px;
	color: #fff;
	display: block;
	font-size: 34px;
	height: 100px;
	line-height: 90px;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 100px;
	transition:0.3s;
}
.video_btn a:hover{border: 4px solid #ffaa17;}
/*
* ----------------------------------------------------------------------------------------
* 05.END COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/

/* WHY CHOOSE */
/*
* ----------------------------------------------------------------------------------------
* 06.START WHY CHOOSE US DESIGN
* ----------------------------------------------------------------------------------------
*/
.why_choose_area {
	margin-top: 80px;
}
.single_why_choose{margin-top:60px;}
.single_why_choose h2 {
	font-size: 60px;
	font-weight: 600;
	line-height: 76px;
	margin-bottom: 30px;
}
.single_why_choose p{margin-bottom: 30px;}
.promotional_content p {
	width: 90%;
	margin: auto;
	margin-top: 40px;
	text-align: center;
	font-size: 17px;
	line-height: 32px;
}
/*
* ----------------------------------------------------------------------------------------
* 11.END PROMOTION DESIGN
* ----------------------------------------------------------------------------------------
*/

/* TESTIMONIALS */
/*
* ----------------------------------------------------------------------------------------
* 13.START TESTIMONIALS DESIGN
* ----------------------------------------------------------------------------------------
*/
.testimonial_area{padding-bottom:30px;}
.single_testimonial {
	margin-bottom: 50px;
}
.testimonial_img img {
	width: 100px;
	border-radius: 100px;
	margin-right: 20px;
	float: left;
	margin-bottom:60px;
}
.single_testimonial p {
	margin-bottom: 20px;
	overflow: hidden;
}
.single_testimonial h4 {
	overflow: hidden;
	font-size: 20px;
}
.single_testimonial h5 {
	font-family: 'Poppins', sans-serif;
	overflow: hidden;
	font-size: 16px;
}
/*
* ----------------------------------------------------------------------------------------
* 13.END TESTIMONIALS DESIGN
* ----------------------------------------------------------------------------------------
*/

/* BLOG */
/*
* ----------------------------------------------------------------------------------------
* 15.START BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
.blog_area{background:#f9fcff;padding-bottom:50px;}
.home_single_blog{
background:#fff;
margin-bottom:30px;
}
.home_blog_content{padding:30px;border-radius: 10px;}
.blog-img img {
	width: 1000%;
}
.home_single_blog img {
	width: 100%;
}
.blog_title_info {
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	margin-bottom: 20px;
}
.blog_title_info h2 a {
	color: #1b2032;
	transition: 0.3s;
	margin-bottom: 5px;
	display: inline-block;
}
.blog_title_info h2 a:hover{color:#ffaa17;}
.blog_title_info span {
	font-size: 14px;
	margin: 0 5px;
}
.blog_title_info span a {
	color: #ffaa17;
	transition: 0.3s;
	letter-spacing: 1px;
}
.blog_title_info span a:hover{color:#1b2032;}
.home_b_btn {
	color: #1b2032;
	font-weight: 300;
	margin-top: 10px;
	display: inline-block;
}
.home_b_btn:hover{color:#ffaa17;}
.marketing_content h2 {
	margin-bottom: 40px;
	font-size: 40px;
	font-weight: 600;
}
.marketing_text p{margin-bottom:20px;}
.single_marketing{margin-bottom: 40px;}
.marketing_icon_img img {
	float: left;
	margin-right: 20px;
	width: 70px;
	margin-bottom: 20px;
}
.single_marketing p{overflow: hidden;}
/* ----------------------------------------------------------------------------------------
* 21.END SERVICE PAGES DESIGN
* ----------------------------------------------------------------------------------------
*/

/*==================================================
Development Process
==================================================*/

.app_process{
    background:#f9fcff;
}

.process_wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
}

.process_box{
    width:165px;
    background:#fff;
    padding:30px 20px;
    border-radius:10px;
    text-align:center;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    transition:.3s;
    position:relative;
}

.process_box:hover{
    transform:translateY(-8px);
}

.process_box span{
    position:absolute;
    top:-15px;
    left:50%;
    transform:translateX(-50%);
    width:40px;
    height:40px;
    line-height:40px;
    border-radius:50%;
    background:#9f1d55;
    color:#fff;
    font-weight:600;
}

.process_box i{
    font-size:40px;
    color:#ffaa17;
    margin:20px 0;
}

.process_box h4{
    margin-bottom:10px;
    font-size:22px;
}

.process_box p{
    font-size:14px;
    line-height:24px;
}

.process_arrow{
    padding:0 12px;
}

.process_arrow i{
    font-size:32px;
    color:#ffaa17;
}

/*==================================================
Industries
==================================================*/

.industries_area{
    background:#fff;
}

.industry_box{
    background:#f9fcff;
    border:1px solid #eee;
    border-radius:8px;
    padding:30px 20px;
    text-align:center;
    margin-bottom:30px;
    transition:.3s;
}

.industry_box:hover{
    background:#ffaa17;
    color:#fff;
    transform:translateY(-8px);
}

.industry_box:hover i,
.industry_box:hover h5{
    color:#fff;
}

.industry_box i{
    font-size:42px;
    color:#ffaa17;
    margin-bottom:15px;
}

.industry_box h5{
    margin:0;
    font-size:18px;
}

/* Mobile */

@media(max-width:991px){

.process_arrow{
    display:none;
}

.process_box{
    width:100%;
    margin-bottom:30px;
}

}

/*====================================
Why Appiguru
====================================*/

.value-section{
    background:#f8f9fc;
}

.value-card{

    background:#fff;
    padding:45px 35px;
    text-align:center;

    border-radius:16px;

    border-top:5px solid #B72D5B;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;
}

.value-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(183,45,91,.18);

}

.value-icon{

    width:80px;
    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    background:linear-gradient(135deg,#B72D5B,#D84C6F);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:34px;

    color:#fff;

    box-shadow:0 10px 25px rgba(183,45,91,.30);

}

.value-card h4{

    color:#1B1B1B;

    font-size:24px;

    margin-bottom:18px;

    font-weight:600;

}

.value-card p{

    color:#666;

    font-size:16px;

    line-height:28px;

}

@media(max-width:991px){

.value-card{

    margin-bottom:30px;

}

}
/*========================================================
APPIGURU OVERLAPPING PORTFOLIO
========================================================*/

.app-work-stack {
    padding: 110px 0 140px;
    background: #f7f7fa;
    overflow: hidden;
}

/*--------------------------------------------------------
TITLE
--------------------------------------------------------*/

.app-work-title {
    max-width: 780px;
    margin: 0 auto 80px;
}

.app-work-title > span {
    color: #b72d5b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
}

.app-work-title h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 52px;
    line-height: 1.15;
    font-weight: 400;
    color: #1b1b1b;
    margin: 18px 0;
}

.app-work-title h2 strong {
    color: #b72d5b;
    font-weight: 600;
}

.app-work-title p {
    color: #777;
    font-size: 16px;
    line-height: 28px;
}

/*--------------------------------------------------------
STACK AREA
--------------------------------------------------------*/

.work-stack-container {
    position: relative;

    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    /*
       The cards overlap each other.
    */
    padding-bottom: 80px;
}

/*--------------------------------------------------------
CARD
--------------------------------------------------------*/

.work-stack-item {

    position: sticky;

    top: 100px;

    width: 100%;

    min-height: 500px;

    margin-bottom: -120px;

    border-radius: 26px;

    padding: 55px;

    display: flex;

    align-items: center;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(0,0,0,.15);

    transition: transform .4s ease;

}

/*
    Layer order
*/

.work-one {
    z-index: 1;
    background: #ffffff;
}

.work-two {
    z-index: 2;

    background:
        linear-gradient(
            135deg,
            #21182f,
            #70294f
        );
}

.work-three {
    z-index: 3;

    background:
        linear-gradient(
            135deg,
            #17243f,
            #385b9a
        );
}

.work-four {
    z-index: 4;

    background:
        linear-gradient(
            135deg,
            #24182f,
            #8b3c6d
        );
}

/*--------------------------------------------------------
NUMBER
--------------------------------------------------------*/

.work-stack-number {

    position: absolute;

    top: 20px;

    right: 35px;

    font-family: 'Oswald', sans-serif;

    font-size: 110px;

    font-weight: 600;

    line-height: 1;

    color: rgba(183,45,91,.08);

}

.work-two .work-stack-number,
.work-three .work-stack-number,
.work-four .work-stack-number {

    color: rgba(255,255,255,.07);

}

/*--------------------------------------------------------
TEXT
--------------------------------------------------------*/

.work-stack-text {

    width: 50%;

    position: relative;

    z-index: 3;

}

.work-stack-text > span {

    color: #b72d5b;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2px;

}

.work-two .work-stack-text > span,
.work-three .work-stack-text > span,
.work-four .work-stack-text > span {

    color: #ff759b;

}

.work-stack-text h3 {

    font-family: 'Oswald', sans-serif;

    font-size: 43px;

    font-weight: 400;

    line-height: 1.2;

    color: #1b1b1b;

    margin: 18px 0;

}

.work-two .work-stack-text h3,
.work-three .work-stack-text h3,
.work-four .work-stack-text h3 {

    color: #ffffff;

}

.work-stack-text h3 strong {

    display: block;

    color: #b72d5b;

    font-weight: 600;

}

.work-two .work-stack-text h3 strong,
.work-three .work-stack-text h3 strong,
.work-four .work-stack-text h3 strong {

    color: #ff759b;

}

.work-stack-text p {

    max-width: 440px;

    color: #777;

    font-size: 15px;

    line-height: 28px;

    margin-bottom: 25px;

}

.work-two .work-stack-text p,
.work-three .work-stack-text p,
.work-four .work-stack-text p {

    color: rgba(255,255,255,.70);

}

/*--------------------------------------------------------
TAGS
--------------------------------------------------------*/

.work-stack-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 28px;

}

.work-stack-tags b {

    padding: 6px 14px;

    border-radius: 30px;

    border: 1px solid #e4e4e4;

    color: #555;

    font-size: 11px;

    font-weight: 400;

}

.work-two .work-stack-tags b,
.work-three .work-stack-tags b,
.work-four .work-stack-tags b {

    color: #fff;

    border-color: rgba(255,255,255,.2);

}

/*--------------------------------------------------------
LINK
--------------------------------------------------------*/

.work-stack-text a {

    color: #b72d5b;

    font-size: 14px;

    font-weight: 600;

}

.work-two .work-stack-text a,
.work-three .work-stack-text a,
.work-four .work-stack-text a {

    color: #ff759b;

}

.work-stack-text a i {

    margin-left: 8px;

    transition: .3s;

}

.work-stack-text a:hover i {

    margin-left: 14px;

}

/*--------------------------------------------------------
IMAGE
--------------------------------------------------------*/

.work-stack-image {

    position: relative;

    width: 50%;

    height: 390px;

    display: flex;

    align-items: center;

    justify-content: center;

}

/*
    Decorative glow behind image
*/

.work-stack-image:before {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(183,45,91,.35),
            transparent 65%
        );

}

/*
    Actual portfolio image
*/

.work-stack-image img {

    position: relative;

    z-index: 2;

    max-width: 85%;

    max-height: 360px;

    object-fit: contain;

    border-radius: 12px;

    box-shadow:
        0 30px 60px rgba(0,0,0,.30);

    transition: .5s ease;

}

.work-stack-item:hover
.work-stack-image img {

    transform:
        scale(1.04)
        translateY(-8px);

}

/*--------------------------------------------------------
VIEW ALL
--------------------------------------------------------*/

.work-stack-button {

    position: relative;

    z-index: 10;

    margin-top: 100px;

}

.work-stack-button a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 30px;

    border-radius: 30px;

    border: 1px solid #b72d5b;

    color: #b72d5b;

    font-size: 14px;

    font-weight: 600;

    background: #fff;

    transition: .3s;

}

.work-stack-button a:hover {

    background: #b72d5b;

    color: #fff;

}

/*========================================================
TABLET
========================================================*/

@media(max-width:991px) {

    .app-work-title h2 {

        font-size: 43px;

    }

    .work-stack-item {

        padding: 40px;

        min-height: 440px;

        margin-bottom: -90px;

    }

    .work-stack-text h3 {

        font-size: 35px;

    }

    .work-stack-image {

        height: 320px;

    }

}

/*========================================================
MOBILE
========================================================*/

@media(max-width:767px) {

    .app-work-stack {

        padding: 75px 0 100px;

    }

    .app-work-title {

        margin-bottom: 50px;

    }

    .app-work-title h2 {

        font-size: 34px;

    }

    .app-work-title p {

        font-size: 14px;

        line-height: 25px;

    }

    /*
       On mobile we still overlap,
       but reduce the amount.
    */

    .work-stack-item {

        position: relative;

        top: auto;

        display: block;

        min-height: 550px;

        padding: 30px;

        margin-bottom: -55px;

        border-radius: 20px;

    }

    .work-stack-text {

        width: 100%;

    }

    .work-stack-text h3 {

        font-size: 30px;

    }

    .work-stack-text p {

        font-size: 14px;

        line-height: 25px;

    }

    .work-stack-image {

        width: 100%;

        height: 250px;

        margin-top: 20px;

    }

    .work-stack-image img {

        max-height: 230px;

    }

    .work-stack-number {

        font-size: 70px;

        right: 20px;

    }

    .work-stack-button {

        margin-top: 100px;

    }

}
/*=========================================================
    APPIGURU CONTACT / FORM
=========================================================*/

.appiguru-contact {

    padding: 110px 0;

    background:
        radial-gradient(
            circle at 10% 50%,
            rgba(183,45,91,.12),
            transparent 35%
        ),
        #f7f7fa;

}

/* MAIN WRAPPER */

.app-contact-wrapper {

    display: flex;

    align-items: stretch;

    background: #ffffff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(0,0,0,.10);

}

/*=========================================================
    LEFT
=========================================================*/

.app-contact-info {

    width: 45%;

    padding: 65px;

    background:
        linear-gradient(
            145deg,
            #17151e,
            #2a1722
        );

    color: #ffffff;

    position: relative;

    overflow: hidden;

}

/* Decorative circle */

.app-contact-info:after {

    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    right: -150px;
    bottom: -150px;

    border: 1px solid rgba(255,255,255,.08);

}

.contact-label {

    color: #d84c6f;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 3px;

}

.app-contact-info h2 {

    font-family: 'Oswald', sans-serif;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 400;

    margin: 20px 0;

}

.app-contact-info h2 strong {

    display: block;

    color: #d84c6f;

    font-weight: 600;

}

.app-contact-info > p {

    color: #b9b9c2;

    font-size: 15px;

    line-height: 28px;

    max-width: 450px;

    margin-bottom: 30px;

}

/* BENEFITS */

.contact-benefits {

    margin-bottom: 35px;

}

.contact-benefits div {

    display: flex;

    align-items: center;

    margin-bottom: 14px;

}

.contact-benefits i {

    width: 21px;
    height: 21px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #b72d5b;

    color: #ffffff;

    font-size: 9px;

    margin-right: 10px;

}

.contact-benefits span {

    color: #dedee2;

    font-size: 13px;

}

/* DIRECT CONTACT */

.contact-direct {

    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.10);

}

.contact-direct span {

    display: block;

    color: #777985;

    font-size: 11px;

    margin-bottom: 8px;

}

.contact-direct a {

    color: #ffffff;

    font-size: 14px;

    font-weight: 500;

}

.contact-direct a i {

    color: #d84c6f;

    margin-right: 8px;

}

/*=========================================================
    FORM
=========================================================*/

.app-contact-form {

    width: 55%;

    padding: 65px;

    background: #ffffff;

}

.form-heading {

    margin-bottom: 30px;

}

.form-heading > span {

    color: #b72d5b;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

}

.form-heading h3 {

    color: #1b1b1b;

    font-family: 'Oswald', sans-serif;

    font-size: 32px;

    font-weight: 400;

    margin-top: 8px;

}

/* FORM ROW */

.app-contact-form .form-row {

    display: flex;

    gap: 18px;

}

.app-contact-form .form-group {

    flex: 1;

    margin-bottom: 20px;

}

.app-contact-form label {

    display: block;

    color: #333;

    font-size: 12px;

    font-weight: 500;

    margin-bottom: 8px;

}

/* INPUT */

.app-contact-form input,
.app-contact-form select,
.app-contact-form textarea {

    width: 100%;

    border: 1px solid #e5e5e8;

    border-radius: 8px;

    background: #fafafd;

    color: #333;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    padding: 13px 15px;

    outline: none;

    transition: .3s;

}

.app-contact-form input:focus,
.app-contact-form select:focus,
.app-contact-form textarea:focus {

    border-color: #b72d5b;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(183,45,91,.07);

}

.app-contact-form textarea {

    resize: vertical;

    min-height: 120px;

}

/* SELECT */

.app-contact-form select {

    appearance: none;

    cursor: pointer;

}

/* BUTTON */

.app-contact-submit {

    border: 0;

    border-radius: 30px;

    padding: 14px 25px;

    background:
        linear-gradient(
            135deg,
            #b72d5b,
            #d84c6f
        );

    color: #ffffff;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: .3s;

}

.app-contact-submit i {

    margin-left: 10px;

    transition: .3s;

}

.app-contact-submit:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(183,45,91,.25);

}

.app-contact-submit:hover i {

    transform: translateX(5px);

}

/* NOTE */

.form-note {

    display: block;

    color: #999;

    font-size: 10px;

    margin-top: 12px;

}

/*=========================================================
    MOBILE
=========================================================*/

@media(max-width:767px) {

    .appiguru-contact {

        padding: 70px 0;

    }

    .app-contact-wrapper {

        display: block;

    }

    .app-contact-info,
    .app-contact-form {

        width: 100%;

        padding: 40px 25px;

    }

    .app-contact-info h2 {

        font-size: 38px;

    }

    .app-contact-form .form-row {

        display: block;

    }

}
/*========================================================
    APPIGURU TRUSTED LOGOS
========================================================*/

.appiguru-trusted {
    padding: 55px 0;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
}

.trusted-heading {
    margin-bottom: 35px;
}

.trusted-heading span {
    color: #b72d5b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
}

.trusted-heading h3 {
    color: #222;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin: 8px 0 0;
}

.trusted-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.trusted-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
}

.trusted-logo img {
    max-width: 135px;
    max-height: 45px;
    width: auto;
    height: auto;

    opacity: .55;

    filter: grayscale(100%);

    transition: .3s;
}

.trusted-logo:hover img {
    opacity: 1;
    filter: grayscale(0%);
}

/* MOBILE */

@media(max-width:767px) {

    .appiguru-trusted {
        padding: 45px 0;
    }

    .trusted-logos {
        flex-wrap: wrap;
        gap: 25px;
    }

    .trusted-logo {
        flex: 0 0 29%;
    }

    .trusted-logo img {
        max-width: 100px;
        max-height: 35px;
    }

}
/*=========================================================
    APPIGURU PROFESSIONAL FOOTER
=========================================================*/

.appiguru-footer-pro {
    background: #111116;
    color: #fff;
}

/*=========================================================
    TOP CTA
=========================================================*/

.app-footer-top-cta {
    background: #f7f7f9;
    padding: 70px 0 0;
}

.footer-cta-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 50px 60px;

    border-radius: 20px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(216,76,111,.3),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #21151e,
            #371726
        );

}

.footer-cta-inner > div {
    max-width: 750px;
}

.footer-cta-inner span {

    color: #d84c6f;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

}

.footer-cta-inner h2 {

    color: #fff;

    font-family: 'Oswald', sans-serif;

    font-size: 38px;

    font-weight: 400;

    line-height: 1.2;

    margin: 12px 0 0;

}

.footer-cta-inner h2 strong {

    color: #d84c6f;

    font-weight: 600;

}

.footer-cta-inner > a {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 25px;

    background: #b72d5b;

    border-radius: 30px;

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    transition: .3s;

}

.footer-cta-inner > a:hover {

    background: #d84c6f;

    color: #fff;

    transform: translateY(-2px);

}

/*=========================================================
    MAIN LINKS
=========================================================*/

.app-footer-links {

    padding: 75px 0 0;

    background: #111116;

}

.footer-pro-column {

    margin-bottom: 35px;

}

.footer-pro-column h4 {

    color: #fff;

    font-size: 16px;

    font-weight: 600;

    margin-bottom: 22px;

}

.footer-pro-column > a {

    display: block;

    color: #85858f;

    font-size: 16px;

    line-height: 23px;

    margin-bottom: 5px;

    transition: .25s;

}

.footer-pro-column > a:hover {

    color: #d84c6f;

    transform: translateX(3px);

}

/* CONTACT */

.footer-pro-contact {

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid rgba(255,255,255,.07);

}

.footer-pro-contact span {

    display: block;

    color: #62626b;

    font-size: 10px;

    margin-bottom: 6px;

}

.footer-pro-contact a {

    color: #d84c6f;

    font-size: 12px;

}

/*=========================================================
    LOCATIONS
=========================================================*/

.footer-locations {

    display: flex;

    align-items: center;

    gap: 60px;

    margin-top: 35px;

    padding: 35px 0;

    border-top: 1px solid rgba(255,255,255,.07);

    border-bottom: 1px solid rgba(255,255,255,.07);

}

.footer-location-title {

    min-width: 220px;

}

.footer-location-title span {

    color: #d84c6f;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 2px;

}

.footer-location-title h4 {

    color: #fff;

    font-size: 14px;

    font-weight: 500;

    margin: 7px 0 0;

}

.footer-location {

    padding-left: 35px;

    border-left: 1px solid rgba(255,255,255,.08);

}

.footer-location strong {

    display: block;

    color: #fff;

    font-size: 11px;

    letter-spacing: 1px;

    margin-bottom: 6px;

}

.footer-location p {

    color: #707078;

    font-size: 11px;

    line-height: 19px;

    margin: 0;

}

/*=========================================================
    BOTTOM
=========================================================*/

.footer-pro-bottom {

    min-height: 75px;

    display: flex;

    align-items: center;

    gap: 30px;

}

.footer-pro-logo {

    margin-right: 10px;

}

.footer-pro-logo img {

    width: 115px;

    height: auto;

}

.footer-pro-copy {

    color: #62626b;

    font-size: 10px;

    flex: 1;

}

.footer-pro-social {

    display: flex;

    gap: 7px;

}

.footer-pro-social a {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;

    color: #777780;

    font-size: 11px;

    transition: .3s;

}

.footer-pro-social a:hover {

    background: #b72d5b;

    border-color: #b72d5b;

    color: #fff;

}

.footer-pro-legal {

    display: flex;

    gap: 18px;

}

.footer-pro-legal a {

    color: #62626b;

    font-size: 10px;

}

.footer-pro-legal a:hover {

    color: #d84c6f;

}

/*=========================================================
    MOBILE
=========================================================*/

@media(max-width:767px) {

    .app-footer-top-cta {

        padding-top: 50px;

    }

    .footer-cta-inner {

        display: block;

        padding: 35px 25px;

    }

    .footer-cta-inner h2 {

        font-size: 31px;

    }

    .footer-cta-inner > a {

        margin-top: 25px;

    }

    .app-footer-links {

        padding-top: 55px;

    }

    .footer-locations {

        display: block;

    }

    .footer-location-title {

        margin-bottom: 25px;

    }

    .footer-location {

        border-left: 0;

        border-top: 1px solid rgba(255,255,255,.07);

        padding: 15px 0;

    }

    .footer-pro-bottom {

        flex-wrap: wrap;

        padding: 20px 0;

    }

    .footer-pro-copy {

        order: 3;

        flex-basis: 100%;

        margin-top: 10px;

    }

    .footer-pro-legal {

        margin-left: auto;

    }

}
/*=========================================================
    APPIGURU HOME BANNER
=========================================================*/

.home_bg {
    height: 700px;

    position: relative;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}

.home_bg::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(20, 15, 25, .35),
            rgba(183, 45, 91, .25)
        );

    z-index: 1;
}

.hero-text {

    position: relative;

    z-index: 2;

    padding-top: 250px;
}

.hero-text h2 {
    color: #fff;

    font-size: 56px;

    font-weight: 700;

    line-height: 1.15;

    text-transform: none;
}

.hero-text p {
    color: #fff;

    margin-bottom: 25px;
}

.hero-text a {
    background: #b72d5b;

    border: 2px solid #b72d5b;

    color: #fff;

    padding: 10px 30px;

    border-radius: 30px;

    display: inline-block;

    transition: .3s;
}

.hero-text a:hover {
    background: transparent;

    border-color: #fff;

    color: #fff;
}


@media(max-width:767px) {

    .home_bg {
        height: 650px;
    }

    .hero-text {
        padding-top: 200px;
    }

    .hero-text h2 {
        font-size: 36px;
    }

}
/*=========================================================
    APPIGURU - INNER PAGE BANNERS
=========================================================*/

.section-top {
    position: relative;

    padding-top: 155px;
    padding-bottom: 90px;

    background-image: url("../img/bg/home-bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* Appiguru overlay */

.section-top::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(22, 15, 27, .90),
            rgba(183, 45, 91, .78)
        );

    z-index: 0;
}


/* Content above overlay */

.section-top .container {
    position: relative;
    z-index: 2;
}


/* Banner title */

.section-top-title {
    text-align: center;
}

.section-top-title h1 {

    position: relative;

    color: #ffffff;

    font-family: 'Oswald', sans-serif;

    font-size: 52px;

    font-weight: 600;

    line-height: 1.2;

    margin: 0;

    text-transform: capitalize;

}


/* Optional subtitle */

.section-top-title p {

    color: rgba(255,255,255,.85);

    font-size: 15px;

    line-height: 25px;

    max-width: 650px;

    margin: 15px auto 0;

}


/*=========================================================
    TABLET
=========================================================*/

@media(max-width:991px) {

    .section-top {

        padding-top: 135px;
        padding-bottom: 75px;

    }

    .section-top-title h1 {

        font-size: 44px;

    }

}


/*=========================================================
    MOBILE
=========================================================*/

@media(max-width:767px) {

    .section-top {

        padding-top: 115px;
        padding-bottom: 60px;

        background-position: center;

    }

    .section-top-title h1 {

        font-size: 34px;

    }

    .section-top-title p {

        font-size: 13px;

        line-height: 22px;

        padding: 0 15px;

    }

}
/*=========================================================
    APPIGURU INTRO SECTION
=========================================================*/

.appiguru-intro {

    position: relative;

    padding: 0px 0 18px;

    background: #ffffff;

    overflow: hidden;

}


/*=========================================================
    LEFT CONTENT
=========================================================*/

.app-intro-content {

    position: relative;

    z-index: 5;

    padding-right: 20px;

}


.app-intro-label {

    display: block;

    color: #b72d5b;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.app-intro-line {

    width: 48px;

    height: 2px;

    margin: 18px 0 28px;

    background: #b72d5b;

}


.app-intro-content h2 {

    color: #151a2d;

    font-family: 'Oswald', sans-serif;

    font-size: 62px;

    font-weight: 600;

    line-height: 1.08;

    letter-spacing: -1px;

    margin: 0 0 25px;

}


.app-intro-content h2 span {

    color: #b72d5b;

}


.app-intro-content h3 {

    color: #11182c;

    font-family: 'Poppins', sans-serif;

    font-size: 21px;

    font-weight: 500;

    line-height: 1.5;

    margin-bottom: 20px;

}


.app-intro-content h3 strong {

    color: #b72d5b;

    font-weight: 600;

}


.app-intro-content > p {

    max-width: 620px;

    color: #687080;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    line-height: 1.9;

    margin-bottom: 28px;

}


/*=========================================================
    BUTTONS
=========================================================*/

.app-intro-buttons {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 35px;

}


.app-btn-primary {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 13px 25px;

    border-radius: 30px;

    background: #c62e5c;

    color: #fff;

    font-family: 'Poppins', sans-serif;

    font-size: 13px;

    font-weight: 600;

    transition: .3s;

}


.app-btn-primary:hover {

    background: #a9244d;

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(198,46,92,.22);

}


.app-btn-secondary {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 11px 20px;

    border: 1.5px solid #182033;

    border-radius: 30px;

    color: #182033;

    font-size: 13px;

    font-weight: 500;

    transition: .3s;

}


.app-btn-secondary span {

    width: 22px;

    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #182033;

    color: #fff;

    font-size: 8px;

}


.app-btn-secondary:hover {

    background: #182033;

    color: #fff;

}


/*=========================================================
    TECHNOLOGIES
=========================================================*/

.app-technologies {

    margin-top: 5px;

}


.app-tech-title {

    position: relative;

    display: flex;

    align-items: center;

    gap: 15px;

    color: #818795;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 18px;

}


.app-tech-title:before,
.app-tech-title:after {

    content: "";

    height: 1px;

    background: #e6e7eb;

}


.app-tech-title:before {

    width: 55px;

}


.app-tech-title:after {

    width: 65px;

}


.app-tech-list {

    display: flex;

    align-items: center;

    gap: 28px;

}


.app-tech {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #30394d;

    font-size: 13px;

    font-weight: 500;

}


.app-tech i {

    color: #b72d5b;

    font-size: 19px;

}


/*=========================================================
    PHONE AREA
=========================================================*/

.app-mockup-area {

    position: relative;

    width: 100%;

    height: 570px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* MAGENTA GLOW */

.app-glow {

    position: absolute;

    width: 390px;

    height: 390px;

    border-radius: 50%;

    background: rgba(198,46,92,.18);

    filter: blur(2px);

}


/* CIRCLES */

.app-circle {

    position: absolute;

    border: 1px solid rgba(198,46,92,.35);

    border-radius: 50%;

}


.app-circle-one {

    width: 430px;

    height: 430px;

}


.app-circle-two {

    width: 510px;

    height: 510px;

    border-color: rgba(198,46,92,.15);

}


/*=========================================================
    PHONE
=========================================================*/

.app-phone {

    position: absolute;

    width: 205px;

    height: 420px;

    padding: 7px;

    border-radius: 30px;

    background: #11131a;

    box-shadow:
        0 25px 50px rgba(20,20,30,.25);

    overflow: hidden;

}


.app-phone-screen {

    position: relative;

    width: 100%;

    height: 100%;

    padding: 18px 14px;

    border-radius: 24px;

    background: #fff;

    overflow: hidden;

}


.app-phone-left {

    z-index: 1;

    left: 25px;

    transform: rotate(-9deg);

}


.app-phone-center {

    z-index: 3;

    width: 220px;

    height: 455px;

}


.app-phone-right {

    z-index: 2;

    right: 15px;

    transform: rotate(9deg);

}


/* PHONE STATUS */

.phone-status {

    display: flex;

    justify-content: space-between;

    color: #6b7180;

    font-size: 7px;

    margin-bottom: 18px;

}


.phone-status span {

    letter-spacing: 2px;

}


/* PHONE TITLES */

.phone-title {

    color: #161b2c;

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 20px;

}


.phone-greeting {

    color: #151a2d;

    font-size: 14px;

    font-weight: 700;

}


.phone-subtitle {

    color: #858b99;

    font-size: 7px;

    margin: 5px 0 15px;

}


/* FINANCE */

.phone-balance {

    padding: 14px;

    border-radius: 12px;

    background: #171d32;

    color: #fff;

    margin-bottom: 10px;

}


.phone-balance small,
.phone-card small {

    display: block;

    font-size: 7px;

    opacity: .7;

}


.phone-balance strong {

    display: block;

    font-size: 17px;

    margin: 5px 0;

}


.phone-balance span {

    font-size: 6px;

    color: #9ce2ba;

}


.phone-card {

    padding: 10px;

    border-radius: 9px;

    margin-bottom: 7px;

}


.phone-card strong {

    display: block;

    font-size: 11px;

    margin-top: 3px;

}


.phone-card.pink {

    background: #c62e5c;

    color: #fff;

}


.phone-card.light {

    background: #f0f1f5;

    color: #202638;

}


/* TRANSACTIONS */

.phone-transactions {

    color: #777e8d;

    font-size: 7px;

}


.phone-transactions > span {

    display: block;

    font-weight: 600;

    color: #30384b;

    margin: 13px 0 8px;

}


.phone-transactions div {

    display: flex;

    justify-content: space-between;

    padding: 7px 0;

    border-bottom: 1px solid #f0f0f2;

}


.phone-transactions b {

    color: #c62e5c;

    font-weight: 500;

}


/* SEARCH */

.phone-search {

    padding: 9px;

    border-radius: 9px;

    background: #f5f6f8;

    color: #9aa0ad;

    font-size: 7px;

    margin-bottom: 15px;

}


.phone-search i {

    margin-right: 5px;

}


.app-phone-screen h5 {

    color: #202638;

    font-size: 9px;

    margin: 12px 0 9px;

}


/* SERVICES */

.phone-services {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px;

}


.phone-services div {

    padding: 10px 6px;

    border-radius: 8px;

    background: #f8e7ed;

    color: #454b5a;

    font-size: 6px;

}


.phone-services div i {

    display: block;

    color: #c62e5c;

    font-size: 12px;

    margin-bottom: 5px;

}


/* PROJECTS */

.phone-project {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 9px;

    margin-bottom: 7px;

    border-radius: 7px;

    background: #f5f6f8;

    color: #4b5262;

    font-size: 6px;

}


.phone-project b {

    color: #c62e5c;

}


/* PROGRESS */

.progress-circle {

    width: 145px;

    height: 145px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin: 30px auto;

    border: 7px solid #d64e9b;

    border-right-color: #34365e;

    border-radius: 50%;

}


.progress-circle strong {

    color: #22283a;

    font-size: 21px;

}


.progress-circle span {

    color: #858b99;

    font-size: 7px;

}


.progress-stats {

    display: flex;

    justify-content: space-around;

    color: #30384b;

    font-size: 8px;

    text-align: center;

}


.progress-stats small {

    display: block;

    color: #858b99;

    font-size: 6px;

    margin-top: 3px;

}


.workout-title {

    color: #252b3c;

    font-size: 9px;

    font-weight: 600;

    margin-top: 25px;

}


.workout-card {

    margin-top: 10px;

    padding: 12px;

    border-radius: 9px;

    background: #25233d;

    color: #fff;

}


.workout-card strong {

    display: block;

    font-size: 8px;

}


.workout-card small {

    font-size: 6px;

    color: #aaaabd;

}


/* BOTTOM NAV */

.phone-bottom-nav {

    position: absolute;

    left: 10px;

    right: 10px;

    bottom: 8px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    color: #777e8d;

    font-size: 9px;

}


.phone-bottom-nav strong {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #c62e5c;

    color: #fff;

    font-size: 17px;

}


/*=========================================================
    VALUE POINTS
=========================================================*/

.app-value-points {

    position: relative;

    z-index: 10;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin-top: 30px;

    padding: 28px 30px;

    border-radius: 16px;

    background: #fff;

    box-shadow:
        0 18px 45px rgba(20,20,30,.08);

}


.app-value-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 5px 25px;

}


.app-value-item + .app-value-item {

    border-left: 1px solid #e7e7eb;

}


.app-value-icon {

    flex: 0 0 48px;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fbeaf0;

    color: #c62e5c;

    font-size: 20px;

}


.app-value-item h4 {

    color: #172036;

    font-size: 16px;

    font-weight: 600;

    margin: 0 0 8px;

}


.app-value-item p {

    color: #717888;

    font-size: 11px;

    line-height: 1.7;

    margin: 0;

}


/*=========================================================
    RESPONSIVE
=========================================================*/

@media(max-width:1199px) {

    .app-intro-content h2 {

        font-size: 54px;

    }

    .app-mockup-area {

        transform: scale(.9);

    }

}


@media(max-width:991px) {

    .appiguru-intro {

        padding: 75px 0;

    }

    .app-intro-content {

        padding-right: 0;

        margin-bottom: 40px;

    }

    .app-mockup-area {

        height: 520px;

    }

    .app-value-points {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    .app-value-item + .app-value-item {

        border-left: 0;

        border-top: 1px solid #e7e7eb;

        padding-top: 20px;

    }

}


@media(max-width:767px) {

    .appiguru-intro {

        padding: 60px 0;

    }

    .app-intro-content h2 {

        font-size: 43px;

    }

    .app-intro-content h3 {

        font-size: 18px;

    }

    .app-intro-buttons {

        flex-wrap: wrap;

    }

    .app-tech-list {

        flex-wrap: wrap;

        gap: 15px 22px;

    }

    .app-mockup-area {

        height: 430px;

        transform: scale(.72);

        transform-origin: top center;

        margin-bottom: -100px;

    }

    .app-phone-left {

        left: 0;

    }

    .app-phone-right {

        right: 0;

    }

    .app-value-points {

        padding: 20px 15px;

    }

    .app-value-item {

        padding-left: 5px;

        padding-right: 5px;

    }

}

/* =========================================
   APPIGURU FAQ SECTION
========================================= */

.appiguru-faq-section {
    background: #f8f9fb;
}

.appiguru-faq-section .section-title {
    margin-bottom: 45px;
}

.faq-subtitle {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.appiguru-faq-section .section-title h2 {
    margin-bottom: 15px;
    font-size: 38px;
    font-weight: 700;
}

.appiguru-faq-section .section-title p {
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.7;
}

/* FAQ Item */

.appiguru-faq {
    margin-top: 10px;
}

.faq-item {
    background: #ffffff;
    border: 1px solid #e7e9ee;
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.faq-question {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 22px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    color: #20242d;
}

.faq-question i {
    font-size: 13px;
    transition: transform 0.3s ease;
    margin-left: 20px;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    display: none;
    padding: 0 25px 23px;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-answer p {
    margin: 0;
    color: #666d78;
    font-size: 15px;
    line-height: 1.8;
}

/* Mobile */

@media (max-width: 767px) {

    .appiguru-faq-section .section-title h2 {
        font-size: 30px;
    }

    .faq-question {
        padding: 18px 20px;
        font-size: 15px;
    }

    .faq-answer {
        padding: 0 20px 20px;
    }

}

/* =========================================
   APPIGURU ENGINEERING SECTION
========================================= */

.appiguru-engineering-section {
    padding: 110px 0;
    background: #f7f9fc;
    overflow: hidden;
}

.engineering-heading {
    margin-bottom: 35px;
}

.engineering-subtitle {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.engineering-heading h2 {
    margin: 0 0 20px;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 700;
    color: #171b25;
}

.engineering-heading h2 span {
    display: inline;
}

.engineering-heading p {
    max-width: 800px;
    margin: 0 auto;
    color: #687080;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   ENGINEERING CARDS
========================================= */

.engineering-card {
    height: 100%;
    padding: 35px;
    background: #ffffff;
    border: 1px solid #e7eaf0;
    border-radius: 18px;
    transition: all 0.3s ease;
}

.engineering-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(25, 35, 55, 0.08);
}

.engineering-card-top {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #edf0f4;
}

.engineering-icon {
    width: 62px;
    height: 62px;
    min-width: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f1f4f8;
}

.engineering-icon span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.engineering-label {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.engineering-card h3 {
    margin: 0;
    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;
    color: #171b25;
}


/* =========================================
   TECHNOLOGY GROUPS
========================================= */

.technology-group {
    margin-bottom: 24px;
}

.technology-group:last-child {
    margin-bottom: 0;
}

.technology-group h4 {
    margin: 0 0 11px;
    font-size: 13px;
    font-weight: 700;
    color: #333947;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tech-tags span {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 6px;
    background: #f5f6f8;
    color: #555d6c;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tech-tags span:hover {
    background: #171b25;
    color: #ffffff;
}


/* =========================================
   BOTTOM CTA
========================================= */

.engineering-bottom {
    margin-top: 55px;
    padding: 28px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: #ffffff;
    border: 1px solid #e7eaf0;
    border-radius: 14px;
}

.engineering-bottom p {
    margin: 0;
    font-size: 16px;
    color: #596170;
}

.engineering-bottom strong {
    color: #171b25;
}

.engineering-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 22px;
    border-radius: 7px;
    background: #171b25;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.engineering-btn:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

.engineering-btn span {
    font-size: 18px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 991px) {

    .appiguru-engineering-section {
        padding: 80px 0;
    }

    .engineering-heading h2 {
        font-size: 38px;
    }

    .engineering-card {
        padding: 28px;
    }

}

@media (max-width: 767px) {

    .appiguru-engineering-section {
        padding: 65px 0;
    }

    .engineering-heading h2 {
        font-size: 30px;
    }

    .engineering-heading p {
        font-size: 14px;
    }

    .engineering-card {
        padding: 24px;
        border-radius: 14px;
    }

    .engineering-card h3 {
        font-size: 20px;
    }

    .engineering-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

    .engineering-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
    }

    .engineering-btn {
        width: 100%;
        justify-content: center;
    }

}

/* =========================================
   APPIGURU - BRAND IMPACT SECTION
========================================= */

.appiguru-impact-section {
    position: relative;
    padding: 100px 0;
    background: #faf8f9;
    overflow: hidden;
}

/* Brand decorative shapes */

.appiguru-impact-section:before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    top: -230px;
    left: -180px;
    background: rgba(178, 48, 87, 0.045);
}

.appiguru-impact-section:after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    right: -180px;
    bottom: -200px;
    background: rgba(201, 72, 89, 0.04);
}

.appiguru-impact-section .container {
    position: relative;
    z-index: 2;
}


/* =========================================
   HEADING
========================================= */

.impact-heading {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}

.impact-heading > span {
    display: inline-block;
    margin-bottom: 12px;

    color: #b23057;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.impact-heading h2 {
    margin: 0 0 17px;

    color: #151515;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -1px;
}

.impact-heading h2 strong {
    background: linear-gradient(
        100deg,
        #b23057,
        #c94859
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.impact-heading p {
    max-width: 680px;
    margin: 0 auto;

    color: #666267;
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================
   GRID
========================================= */

.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


/* =========================================
   CARD
========================================= */

.impact-card {
    position: relative;

    min-height: 225px;
    padding: 32px 25px;

    background: #ffffff;

    border: 1px solid #eee5e8;
    border-radius: 16px;

    text-align: center;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* Gradient top line */

.impact-card:before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background: linear-gradient(
        90deg,
        #b23057,
        #c94859
    );

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.3s ease;
}

.impact-card:hover {
    transform: translateY(-7px);

    border-color: rgba(178, 48, 87, 0.25);

    box-shadow:
        0 20px 45px rgba(60, 20, 35, 0.09);
}

.impact-card:hover:before {
    transform: scaleX(1);
}


/* =========================================
   INDEX CIRCLE
========================================= */

.impact-icon {
    width: 44px;
    height: 44px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fbf0f3;
    border: 1px solid #f2dce2;

    color: #b23057;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}


/* =========================================
   NUMBER
========================================= */

.impact-number {
    margin-bottom: 11px;

    color: #151515;

    font-size: 43px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.impact-number span {
    color: #b23057;
}


/* =========================================
   TITLE
========================================= */

.impact-card h3 {
    max-width: 220px;

    margin: 0 auto;

    color: #3e3a3d;

    font-size: 15px;
    line-height: 1.5;

    font-weight: 600;
}


/* =========================================
   SPECIAL ZERO CARD
========================================= */

.impact-card:nth-child(7) .impact-number {
    font-size: 38px;

    background: linear-gradient(
        100deg,
        #b23057,
        #c94859
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* =========================================
   SUPPORT CARD
========================================= */

.impact-card:nth-child(8) .impact-number {
    background: linear-gradient(
        100deg,
        #b23057,
        #c94859
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1199px) {

    .impact-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}

@media (max-width: 991px) {

    .appiguru-impact-section {
        padding: 80px 0;
    }

    .impact-heading h2 {
        font-size: 38px;
    }

    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 575px) {

    .appiguru-impact-section {
        padding: 65px 0;
    }

    .impact-heading {
        margin-bottom: 35px;
    }

    .impact-heading h2 {
        font-size: 30px;
    }

    .impact-heading p {
        font-size: 14px;
    }

    .impact-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .impact-card {
        min-height: auto;
        padding: 28px 22px;
    }

    .impact-number {
        font-size: 38px;
    }

}

/* =========================================================
   APPIGURU CUSTOM HERO
   Existing homepage content remains unchanged.
========================================================= */

:root{
    --ag-ink:#11131a;
    --ag-muted:#6d7079;
    --ag-brand:#b72d5b;
    --ag-brand-2:#d84c6f;
}

.ag-hero{
    position:relative;
    min-height:720px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#11131a;
    color:#fff;
}

.ag-hero-grid{
    position:absolute;
    inset:0;
    opacity:.42;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(90deg,black 0%,black 55%,transparent 100%);
}

.ag-hero:after{
    content:"";
    position:absolute;
    width:620px;
    height:620px;
    border-radius:50%;
    right:-150px;
    top:50%;
    transform:translateY(-50%);
    background:radial-gradient(circle,rgba(183,45,91,.34),transparent 67%);
}

.ag-hero-layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.03fr .97fr;
    gap:40px;
    align-items:center;
    padding:105px 0 90px;
}

.ag-eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    color:#d9a0b3;
    font-size:11px;
    font-weight:700;
    letter-spacing:2.5px;
    margin-bottom:24px;
}

.ag-eyebrow span{
    width:26px;
    height:1px;
    background:var(--ag-brand-2);
}

.ag-hero-copy h1{
    max-width:760px;
    font-family:'Poppins',sans-serif;
    font-size:68px;
    line-height:1.02;
    letter-spacing:-3px;
    font-weight:700;
    margin:0 0 26px;
    color:#fff;
}

.ag-hero-copy h1 em{
    font-style:normal;
    color:#df6c8a;
}

.ag-hero-copy>p{
    max-width:610px;
    font-family:'Poppins',sans-serif;
    font-size:17px;
    line-height:1.8;
    color:#b9bbc4;
    margin:0 0 34px;
}

.ag-hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.ag-btn{
    display:inline-flex;
    align-items:center;
    gap:28px;
    padding:15px 20px;
    border:1px solid rgba(255,255,255,.18);
    font-family:'Poppins',sans-serif;
    font-size:13px;
    font-weight:700;
    transition:.25s;
}

.ag-btn-primary{
    background:#fff;
    color:#15151a;
    border-color:#fff;
}

.ag-btn-primary:hover{
    background:var(--ag-brand);
    border-color:var(--ag-brand);
    color:#fff;
}

.ag-btn-ghost{
    color:#fff;
    background:transparent;
}

.ag-btn-ghost:hover{
    background:#fff;
    color:#111;
}

.ag-hero-meta{
    display:flex;
    gap:30px;
    margin-top:46px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.12);
}

.ag-hero-meta span{
    font-family:'Poppins',sans-serif;
    font-size:11px;
    color:#888c96;
    text-transform:uppercase;
    letter-spacing:1px;
}

.ag-hero-meta b{
    display:block;
    color:#fff;
    font-size:20px;
    letter-spacing:0;
    margin-bottom:3px;
}

.ag-hero-product{
    height:520px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ag-orbit{
    position:absolute;
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
}

.ag-orbit-one{
    width:480px;
    height:480px;
}

.ag-orbit-two{
    width:350px;
    height:350px;
    border-color:rgba(216,76,111,.22);
}

.ag-code-card{
    position:absolute;
    z-index:6;
    left:10px;
    top:72px;
    padding:12px 15px;
    background:rgba(255,255,255,.96);
    color:#17181d;
    box-shadow:0 14px 35px rgba(0,0,0,.22);
}

.ag-code-card span,
.ag-code-card small{
    display:block;
    font-family:'Poppins',sans-serif;
    font-size:8px;
    color:#777b84;
    letter-spacing:1.2px;
}

.ag-code-card strong{
    display:block;
    font-family:'Poppins',sans-serif;
    font-size:13px;
    margin:3px 0;
}

.ag-phone-frame{
    position:relative;
    z-index:4;
    width:285px;
    height:535px;
    padding:9px;
    border-radius:40px;
    background:#191a20;
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 35px 80px rgba(0,0,0,.48),0 0 0 10px rgba(255,255,255,.025);
    transform:rotate(5deg);
}

.ag-phone-notch{
    position:absolute;
    z-index:5;
    width:90px;
    height:23px;
    background:#15161b;
    border-radius:0 0 14px 14px;
    left:50%;
    transform:translateX(-50%);
}

.ag-phone-ui{
    height:100%;
    border-radius:32px;
    overflow:hidden;
    padding:26px 22px;
    background:linear-gradient(160deg,#f9f8f5,#e9e9e6);
    color:#16171c;
}

.ag-phone-ui small{
    font-family:'Poppins',sans-serif;
    font-size:9px;
    color:#767983;
}

.ag-phone-ui h3{
    font-family:'Poppins',sans-serif;
    font-size:25px;
    line-height:1.12;
    margin:58px 0 24px;
    letter-spacing:-1px;
}

.ag-phone-ui h3 b{
    color:var(--ag-brand);
}

.ag-ui-chart{
    height:105px;
    border-bottom:1px solid #d5d6d3;
    display:flex;
    align-items:flex-end;
    gap:8px;
    margin-bottom:18px;
}

.ag-ui-chart i{
    width:24px;
    background:#b72d5b;
    border-radius:5px 5px 0 0;
    opacity:.8;
}

.ag-ui-chart i:nth-child(1){height:28%}
.ag-ui-chart i:nth-child(2){height:44%}
.ag-ui-chart i:nth-child(3){height:36%}
.ag-ui-chart i:nth-child(4){height:68%}
.ag-ui-chart i:nth-child(5){height:55%}
.ag-ui-chart i:nth-child(6){height:82%}
.ag-ui-chart i:nth-child(7){height:96%}

.ag-ui-row{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid #dfe0dd;
    font-family:'Poppins',sans-serif;
    font-size:10px;
    color:#777;
}

.ag-ui-row b{
    color:#18191e;
}

.ag-ui-button{
    margin-top:18px;
    background:#17181d;
    color:#fff;
    padding:13px 14px;
    font-family:'Poppins',sans-serif;
    font-size:10px;
    display:flex;
    justify-content:space-between;
}

.ag-tech-float{
    position:absolute;
    z-index:6;
    padding:9px 13px;
    background:#fff;
    color:#191a20;
    border:1px solid rgba(0,0,0,.08);
    font-family:'Poppins',sans-serif;
    font-size:10px;
    font-weight:700;
    box-shadow:0 12px 30px rgba(0,0,0,.2);
}

.ag-tech-a{top:120px;right:20px}
.ag-tech-b{right:5px;bottom:135px}
.ag-tech-c{bottom:55px;left:25px}

@media(max-width:991px){
    .ag-hero-layout{
        grid-template-columns:1fr;
        padding:85px 0 55px;
    }

    .ag-hero-copy h1{
        font-size:55px;
    }

    .ag-hero-product{
        height:480px;
    }
}

@media(max-width:767px){
    .ag-hero{
        min-height:auto;
    }

    .ag-hero-layout{
        padding:70px 0 45px;
    }

    .ag-hero-copy h1{
        font-size:43px;
        letter-spacing:-1.8px;
    }

    .ag-hero-copy>p{
        font-size:14px;
    }

    .ag-hero-meta{
        gap:15px;
        flex-wrap:wrap;
    }

    .ag-hero-product{
        height:420px;
        transform:scale(.82);
        transform-origin:top center;
        margin-bottom:-70px;
    }
}


/* =========================================================
   APPIGURU TYPOGRAPHY NORMALIZATION
   Keep the redesigned hero visually custom while using the
   same Poppins family as the existing site.
========================================================= */

.ag-hero,
.ag-hero *,
.ag-btn,
.ag-code-card,
.ag-code-card *,
.ag-phone-ui,
.ag-phone-ui *,
.ag-tech-float {
    font-family: 'Poppins', sans-serif !important;
}

.ag-hero-copy h1,
.ag-phone-ui h3 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600;
}

.ag-hero-copy h1 {
    letter-spacing: -1.5px;
}
/* =========================================================
   APPIGURU - iOS APP DEVELOPMENT PAGE
   Add this block at the bottom of style.css
========================================================= */

.ag-ios-hero {
    position: relative;
    overflow: hidden;
    min-height: 700px;
    display: flex;
    align-items: center;
    background: #11131a;
    color: #fff;
}

.ag-ios-grid {
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 72px 72px;
}

.ag-ios-hero:after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    right: -150px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(183,45,91,.35),
        transparent 68%
    );
}

.ag-ios-hero-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 30px;
    padding: 90px 0;
}

.ag-kicker {
    color: #d98ca5;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 2.5px;
    font-weight: 600;
}

.ag-ios-hero h1 {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 60px;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -2px;
    margin: 20px 0;
}

.ag-ios-hero h1 em {
    color: #df6c8a;
    font-style: normal;
}

.ag-ios-hero p {
    max-width: 610px;
    color: #b9bbc4;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 1.85;
}

.ag-ios-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}

.ag-ios-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,.18);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    transition: .3s;
}

.ag-ios-btn-primary {
    background: #fff;
    color: #111;
    border-color: #fff;
}

.ag-ios-btn-primary:hover {
    background: #b72d5b;
    border-color: #b72d5b;
    color: #fff;
}

.ag-ios-btn-ghost {
    color: #fff;
    background: transparent;
}

.ag-ios-btn-ghost:hover {
    background: #fff;
    color: #111;
}


/* PHONE / VISUAL */

.ag-ios-device {
    position: relative;
    height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ag-ios-orbit {
    position: absolute;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
}

.ag-ios-orbit.a {
    width: 490px;
    height: 490px;
}

.ag-ios-orbit.b {
    width: 350px;
    height: 350px;
    border-color: rgba(216,76,111,.25);
}

.ag-ios-phone {
    position: relative;
    z-index: 3;
    width: 280px;
    height: 530px;
    padding: 9px;
    border-radius: 40px;
    background: #191a20;
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: 0 35px 80px rgba(0,0,0,.55);
    transform: rotate(4deg);
}

.ag-ios-notch {
    position: absolute;
    z-index: 2;
    width: 90px;
    height: 22px;
    left: 50%;
    transform: translateX(-50%);
    background: #111;
    border-radius: 0 0 14px 14px;
}

.ag-ios-screen {
    height: 100%;
    padding: 27px 21px;
    border-radius: 32px;
    background: linear-gradient(160deg,#faf9f6,#e9e9e5);
    color: #17181d;
}

.ag-ios-screen small {
    color: #777;
    font-size: 9px;
}

.ag-ios-screen > b {
    display: block;
    margin-top: 55px;
    color: #b72d5b;
    font-size: 9px;
    letter-spacing: 3px;
}

.ag-ios-screen h3 {
    color: #17181d;
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 500;
    margin: 15px 0;
}

.ag-ios-screen h3 strong {
    color: #b72d5b;
}

.ag-health {
    margin-top: 28px;
    padding: 20px;
    background: #fff;
    font-size: 10px;
}

.ag-health strong {
    display: block;
    margin: 8px 0;
    font-size: 24px;
}

.ag-health i {
    display: block;
    height: 5px;
    background: linear-gradient(
        90deg,
        #b72d5b 0 94%,
        #ddd 94%
    );
}

.ag-ios-screen p {
    color: #777;
    font-size: 9px;
    margin-top: 25px;
}

.ag-float {
    position: absolute;
    z-index: 4;
    padding: 9px 13px;
    background: #fff;
    color: #17181d;
    font-size: 10px;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.ag-float.fa {
    top: 90px;
    left: 15px;
}

.ag-float.fb {
    top: 190px;
    right: 5px;
}

.ag-float.fc {
    bottom: 60px;
    left: 30px;
}


/* =========================================================
   COMMON IOS SECTIONS
========================================================= */

.ag-ios-section {
    padding: 105px 0;
    background: #fff;
}

.ag-ios-section.paper {
    background: #f6f6f3;
}

.ag-ios-section.dark {
    background: #11131a;
    color: #fff;
}

.ag-head {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 55px;
    align-items: end;
    margin-bottom: 55px;
}

.ag-head > div > span {
    color: #b72d5b;
    font-size: 11px;
    letter-spacing: 2.5px;
    font-weight: 600;
}

.ag-head h2 {
    color: #11131a;
    font-family: 'Poppins', sans-serif;
    font-size: 46px;
    line-height: 1.16;
    font-weight: 600;
    letter-spacing: -1.4px;
    margin: 12px 0 0;
}

.ag-ios-section.dark .ag-head h2 {
    color: #fff;
}

.ag-head > p {
    color: #737780;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.9;
    margin: 0;
}

.ag-ios-section.dark .ag-head > p {
    color: #b3b5bd;
}


/* =========================================================
   SERVICES
========================================================= */

.ag-service-list {
    border-top: 1px solid #dedfdc;
}

.ag-service-list article {
    display: grid;
    grid-template-columns: 60px 1fr 35px;
    gap: 20px;
    padding: 29px 5px;
    border-bottom: 1px solid #dedfdc;
    transition: .25s;
}

.ag-service-list article:hover {
    padding-left: 15px;
    background: #f8f8f5;
}

.ag-service-list article > span {
    color: #b72d5b;
    font-size: 10px;
}

.ag-service-list article small {
    color: #777;
    font-size: 12px;
    letter-spacing: 1px;
}

.ag-service-list h3 {
    color: #1b2032;
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 500;
    margin: 5px 0;
}

.ag-service-list p {
    color: #737780;
    font-size: 15px;
    line-height: 1.85;
    margin: 0;
}

.ag-service-list article > b {
    color: #b72d5b;
}


/* =========================================================
   TECHNOLOGY / CONTENT CARDS
========================================================= */

.ag-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 18px;
}

.ag-cards.six {
    grid-template-columns: repeat(3,1fr);
}

.ag-cards article {
    min-height: 225px;
    padding: 28px;
    background: #fff;
    border: 1px solid #e0e1dd;
    transition: .3s;
}

.ag-cards article:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(0,0,0,.08);
}

.ag-cards small {
    color: #b72d5b;
    font-size: 11px;
    letter-spacing: 1px;
}

.ag-cards h3 {
    color: #1b2032;
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 500;
    margin: 12px 0 18px;
}

.ag-cards p {
    color: #737780;
    font-size: 14px;
    line-height: 1.85;
    margin: 0 0 10px;
}


/* =========================================================
   STATS
========================================================= */

.ag-stats {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.ag-stats div {
    min-height: 130px;
    padding: 25px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid rgba(255,255,255,.12);
}

.ag-stats div:last-child {
    border-right: 0;
}

.ag-stats strong {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 31px;
    line-height: 1.1;
}

.ag-stats small {
    color: #858993;
    font-size: 13px;
}


/* =========================================================
   INDUSTRIES
========================================================= */

.ag-industry {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    border-top: 1px solid #dedfdc;
}

.ag-industry article {
    padding: 27px 24px;
    border-right: 1px solid #dedfdc;
    border-bottom: 1px solid #dedfdc;
}

.ag-industry article:nth-child(even) {
    border-right: 0;
}

.ag-industry span {
    color: #b72d5b;
    font-size: 10px;
}

.ag-industry h3 {
    color: #1b2032;
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    font-weight: 500;
    margin: 9px 0;
}

.ag-industry p {
    color: #737780;
    font-size: 13px;
    line-height: 1.85;
}


/* =========================================================
   FAQ
========================================================= */

.ag-faq {
    border-top: 1px solid #dedfdc;
}

.ag-faq details {
    border-bottom: 1px solid #dedfdc;
}

.ag-faq summary {
    position: relative;
    padding: 23px 40px 23px 5px;
    cursor: pointer;
    list-style: none;
    color: #1b2032;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 500;
}

.ag-faq summary::-webkit-details-marker {
    display: none;
}

.ag-faq summary:after {
    content: "+";
    position: absolute;
    right: 5px;
    color: #b72d5b;
    font-size: 22px;
}

.ag-faq details[open] summary:after {
    content: "−";
}

.ag-faq p {
    padding: 0 40px 25px 5px;
    color: #737780;
    font-size: 15px;
    line-height: 1.85;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px) {

    .ag-ios-hero-layout {
        grid-template-columns: 1fr;
    }

    .ag-ios-device {
        height: 450px;
    }

    .ag-head {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ag-cards,
    .ag-cards.six {
        grid-template-columns: repeat(2,1fr);
    }

    .ag-stats {
        grid-template-columns: repeat(4,1fr);
    }

}

@media(max-width:767px) {

    .ag-ios-hero {
        min-height: auto;
    }

    .ag-ios-hero-layout {
        padding: 70px 0 30px;
    }

    .ag-ios-hero h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .ag-ios-hero p {
        font-size: 15px;
    }

    .ag-ios-actions {
        flex-wrap: wrap;
    }

    .ag-ios-device {
        height: 400px;
        transform: scale(.78);
        transform-origin: top center;
        margin-bottom: -70px;
    }

    .ag-ios-section {
        padding: 75px 0;
    }

    .ag-head h2 {
        font-size: 35px;
    }

    .ag-head > p {
        font-size: 13px;
    }

    .ag-cards,
    .ag-cards.six {
        grid-template-columns: 1fr;
    }

    .ag-service-list article {
        grid-template-columns: 40px 1fr 25px;
        gap: 10px;
    }

    .ag-service-list h3 {
        font-size: 19px;
    }

    .ag-service-list p,
    .ag-cards p,
    .ag-industry p,
    .ag-faq p {
        font-size: 14px;
    }

    .ag-industry {
        grid-template-columns: 1fr;
    }

    .ag-industry article {
        border-right: 0;
    }

    .ag-stats {
        grid-template-columns: repeat(2,1fr);
    }

    .ag-stats div:nth-child(even) {
        border-right: 0;
    }

    .ag-stats div:nth-child(n+3) {
        border-top: 1px solid rgba(255,255,255,.12);
    }

    .ag-faq summary {
        font-size: 15px;
    }

}